Basic usage

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.

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.

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;