Pills
Basic usage
tsx
import { Flex } from '@semcore/base-components';
import ThumbDownM from '@semcore/icon/ThumbDown/m';
import ThumbUpM from '@semcore/icon/ThumbUp/m';
import Pills from '@semcore/pills';
import { Text } from '@semcore/typography';
import React from 'react';
const Demo = () => {
const [choice, setChoice] = React.useState(null);
return (
<Flex direction='column' alignItems='flex-start'>
<Text size={200} id='pills-basic-usage'>
Your opinion
</Text>
<Pills mt={2} value={choice} onChange={setChoice} aria-labelledby='pills-basic-usage'>
<Pills.Item value='like'>
<Pills.Item.Addon tag={ThumbUpM} />
<Pills.Item.Text>Like</Pills.Item.Text>
</Pills.Item>
<Pills.Item value={null}>Don't care</Pills.Item>
<Pills.Item value='dislike'>
<Pills.Item.Addon tag={ThumbDownM} />
<Pills.Item.Text>Dislike</Pills.Item.Text>
</Pills.Item>
</Pills>
</Flex>
);
};
export default Demo;
Using as tabs
In case of using pills as tabs for navigation in your app, set behavior to manual
, to make user explicitly select tabs with Enter
.
Don't forget to add role tabpanel
and aria-labelledby
to the content of each tab.
tsx
import { Flex } from '@semcore/base-components';
import Pills from '@semcore/pills';
import { Text } from '@semcore/typography';
import React from 'react';
const contentBLocks = [
'Cats walk like camels and giraffes: They move both of their right feet first, then move both of their left feet. No other animals walk this way.',
'According to Guinness World Records, a Great Dane named Zeus is the world\'s tallest male dog. Zeus is 3 feet, 5.18 inches tall.',
'Since hamsters are nocturnal, they naturally sleep more during the day and are more active at twilight. Don\'t wake them up to play.',
];
const Demo = () => {
const [tab, setTab] = React.useState(0);
return (
<Flex gap={2} direction='column' alignItems='start'>
<Pills behavior='manual' value={tab} onChange={setTab}>
<Pills.Item value={0} id='pills-tab-0'>
Cats
</Pills.Item>
<Pills.Item value={1} id='pills-tab-1'>
Dogs
</Pills.Item>
<Pills.Item value={2} id='pills-tab-2'>
Hamsters
</Pills.Item>
</Pills>
<Text size={200} role='tabpanel' aria-labelledby={`pills-tab-${tab}`} w={200}>
{contentBLocks[tab]}
</Text>
</Flex>
);
};
export default Demo;
Custom pills
You can place additional information like some metrics inside Pills.Item
. In this case, we recommend using Pills strictly as tabs.
tsx
import { Flex } from '@semcore/base-components';
import Pills from '@semcore/pills';
import { Text } from '@semcore/typography';
import React from 'react';
import type { CSSProperties } from 'react';
const contentBLocks = [
'Only awake for snacks and existential crises. The rest of the time, she is contemplating the void from under a blanket.',
'A yoga master: sleeps upside down without dropping a single thought. Scientists are still trying to understand how her brain stays so calm.',
'Sleep is her full-time job. Occasionally wakes up just to sigh and go back to bed. Her alarm clock gave up and filed for early retirement.',
];
const pillStyles: CSSProperties = {
height: 'fit-content',
alignItems: 'stretch',
textAlign: 'inherit',
whiteSpace: 'normal',
} as const;
const Demo = () => {
const [tab, setTab] = React.useState<number>(0);
return (
<Flex direction='column' alignItems='flex-start' gap={2}>
<Text size={300} semibold id='king-pills'>
Average sleep per day
</Text>
<Pills mb={4} behavior='manual' value={tab} onChange={setTab} aria-labelledby='king-pills'>
<Pills.Item value={0} style={pillStyles} p={5} id='custom-pills-tab-0'>
<Pills.Item.Text tag={Flex} direction='column' m={0}>
<Text mb={1}>Wombat</Text>
<Text size={500} bold>16 hours</Text>
</Pills.Item.Text>
</Pills.Item>
<Pills.Item value={1} style={pillStyles} p={5} id='custom-pills-tab-1'>
<Pills.Item.Text tag={Flex} direction='column' m={0}>
<Text mb={1}>Bat</Text>
<Text size={500} bold>20 hours</Text>
</Pills.Item.Text>
</Pills.Item>
<Pills.Item value={2} style={pillStyles} p={5} id='custom-pills-tab-2'>
<Pills.Item.Text tag={Flex} direction='column' m={0}>
<Text mb={1}>Koala</Text>
<Text size={500} bold>22 hours</Text>
</Pills.Item.Text>
</Pills.Item>
</Pills>
<Text size={300} role='tabpanel' aria-labelledby={`custom-pills-tab-${tab}`}>
{contentBLocks[tab]}
</Text>
</Flex>
);
};
export default Demo;