Pills

tsx

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';

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

  return (
    <Pills value={choice} onChange={setChoice}>
      <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>
  );
};

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';

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

  return (
    <Pills value={choice} onChange={setChoice}>
      <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>
  );
};

tsx

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

const Demo = () => {
  return (
    <Flex gap={5}>
      <Flex gap={2} direction='column'>
        <Text size={200}>Behavior like "radio" (auto)</Text>
        <Pills behavior='auto' defaultValue='1'>
          <Pills.Item value='1'>Pill 1</Pills.Item>
          <Pills.Item value='2'>Pill 2</Pills.Item>
          <Pills.Item value='3'>Pill 3</Pills.Item>
        </Pills>
      </Flex>

      <Flex gap={2} direction='column'>
        <Text size={200}>Behavior like "tabs" (manual)</Text>
        <Pills behavior='manual' defaultValue='1'>
          <Pills.Item value='1'>Pill 1</Pills.Item>
          <Pills.Item value='2'>Pill 2</Pills.Item>
          <Pills.Item value='3'>Pill 3</Pills.Item>
        </Pills>
      </Flex>
    </Flex>
  );
};

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

const Demo = () => {
  return (
    <Flex gap={5}>
      <Flex gap={2} direction='column'>
        <Text size={200}>Behavior like "radio" (auto)</Text>
        <Pills behavior='auto' defaultValue='1'>
          <Pills.Item value='1'>Pill 1</Pills.Item>
          <Pills.Item value='2'>Pill 2</Pills.Item>
          <Pills.Item value='3'>Pill 3</Pills.Item>
        </Pills>
      </Flex>

      <Flex gap={2} direction='column'>
        <Text size={200}>Behavior like "tabs" (manual)</Text>
        <Pills behavior='manual' defaultValue='1'>
          <Pills.Item value='1'>Pill 1</Pills.Item>
          <Pills.Item value='2'>Pill 2</Pills.Item>
          <Pills.Item value='3'>Pill 3</Pills.Item>
        </Pills>
      </Flex>
    </Flex>
  );
};