React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
import { useState } from 'react';
import { Accordion, Checkbox, Container, Icon, Stack, Tag, Typography } from '@optimus-web/core';
const MyAccordionComponent = () => {
const [expanded, toggleExpanded] = useState(false);
const [checked, setChecked] = useState(false);
return (
<Accordion
expanded={expanded}
onClick={() => toggleExpanded(!expanded)}
title="Title"
description="Description"
body={
<Container padding={['100', '0']}>
<Body>
This is the body of the accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim
massa nulla, eu maximus ipsum convallis eu. Aliquam erat volutpat.
</Body>
</Container>
}
startSlot={<Icon value={iconName} />}
middleSlot={<Tag variant={tagVariant}>{tagText}</Tag>}
endSlot={<Checkbox name={name} checked={checked} onChange={() => setChecked(!checked)} />}
withHeaderBorder
withBodyBorder
bodyPadding="0"
/>
);
};