Basic example

import React from 'react';
import Pills from '@semcore/ui/pills';
import ThumbUpM from '@semcore/ui/icon/ThumbUp/m';
import ThumbDownM from '@semcore/ui/icon/ThumbDown/m';
import { Text } from '@semcore/ui/typography';
import { Flex } from '@semcore/ui/flex-box';

const Demo = () => {
  const [choice, setChoice] = React.useState(null);

  return (
    <Flex direction='column' alignItems='flex-start'>
      <Text tag='label' 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.

Don't forget to add role tabpanel and aria-labelledby to the content of each tab.

import React from 'react';
import Pills from '@semcore/ui/pills';
import { Flex } from '@semcore/ui/flex-box';
import { Text } from '@semcore/ui/typography';

const contentBLocks = [
  'Lorem ipsum odor amet, consectetuer adipiscing elit. Platea cursus varius interdum convallis torquent finibus phasellus integer. Massa erat aliquet elementum vivamus leo pharetra. ',
  'Tincidunt lacinia nulla etiam; venenatis purus rutrum. Velit commodo volutpat ultrices, ultrices suspendisse facilisis taciti. Venenatis pulvinar sodales maximus justo curabitur.',
  'Aliquam class arcu semper maximus; tincidunt mi. Eros eleifend habitant scelerisque dui nec imperdiet penatibus nostra. Dolor mauris laoreet quis viverra lectus vulputate. ',
];

const Demo = () => {
  const [tab, setTab] = React.useState(0);

  return (
    <Flex gap={5}>
      <Flex gap={2} direction='column'>
        <Pills behavior='manual' value={tab} onChange={setTab}>
          <Pills.Item value={0} id='pills-tab-0'>
            Lorem
          </Pills.Item>
          <Pills.Item value={1} id='pills-tab-1'>
            Tincidunt
          </Pills.Item>
          <Pills.Item value={2} id='pills-tab-2'>
            Aliquam
          </Pills.Item>
        </Pills>
        <Text role='tabpanel' aria-labelledby={`pills-tab-${tab}`} w={200}>
          {contentBLocks[tab]}
        </Text>
      </Flex>
    </Flex>
  );
};

export default Demo;