React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
import { Body, Button, Divider, IconButton, Link, MewsLogo, SidePanel, Stack, Tag, Title } from '@optimus-web/core';
import { IconName } from '@optimus-web/icons';
export const MyMenuListComponent = () => {
const [opened, setOpened] = useState(false);
return (
<>
<Button onClick={() => setOpened(true)}>Click me</Button>
<SidePanel
onClose={() => setOpened(false)}
opened={opened}
title="The Grand Mews Hotel"
width="medium"
headerActions={
<IconButton variant="tertiary" size="small" icon={IconName.Edit} />
}
actions={
<Stack spacing="100" alignment="end">
<Button variant="primary" size="medium" icon={IconName.ExternalLink} iconPosition="right">
Go to property
</Button>
</Stack>
}
content={
<Stack spacing="200" vertical>
<MewsLogo size="large" />
<Body>
The Grand Mews Hotel is a lifestyle hotel that offers 59 rooms (including 4 junior suites and 3 luxury
suites), a chill-out lounge with several “Living Spaces”,a spa, and a state-of-the-art restaurant and bar
with an unbeatable rooftop terrace.
</Body>
<Stack vertical spacing="200">
<Stack spacing="200">
<Body>Type</Body>
<Link standalone underline={false}>
Hotel
</Link>
</Stack>
<Divider />
<Stack spacing="200">
<Body>Location</Body>
<Link standalone underline={false}>
Prague
</Link>
</Stack>
<Divider />
<Stack spacing="200">
<Body>Region</Body>
<Link standalone underline={false}>
Central Europe
</Link>
</Stack>
<Divider />
<Stack spacing="200">
<Body>Brand</Body>
<Link standalone underline={false}>
Mews
</Link>
</Stack>
<Divider />
<Stack spacing="200">
<Body>Employees</Body>
<Link standalone underline={false}>
38
</Link>
</Stack>
</Stack>
<Title level={3}>Tags</Title>
<Stack spacing="50" wrap>
<Tag variant="basicSubtle">Luxury</Tag>
<Tag variant="basicSubtle">Five stars</Tag>
<Tag variant="basicSubtle">SPA</Tag>
<Tag variant="basicSubtle">Terrace</Tag>
<Tag variant="basicSubtle">Restuarant</Tag>
<Tag variant="basicSubtle">Rooftop bar</Tag>
<Tag variant="basicSubtle">Lounge</Tag>
</Stack>
</Stack>
}
/>
</>
);
};