Components

ChoiceChip

Choice chips make it possible to turn functionality on and off, or select one or more options.

Examples

Choice chip with text only

<Stack flexDirection="row">
  <ChoiceChip>Train</ChoiceChip>
  <ChoiceChip>Bus</ChoiceChip>
  <ChoiceChip>Boat</ChoiceChip>
</Stack>

Chips with icons

<Stack flexDirection="row">
  <ChoiceChip 
    icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }}
  >
    Train
  </ChoiceChip>
  <ChoiceChip 
    icon={{ default: <BusOutline24Icon />, checked: <BusFill24Icon /> }}
  >
    Bus
  </ChoiceChip>
  <ChoiceChip 
    icon={{ default: <FerryOutline24Icon />, checked: <FerryFill24Icon /> }}
  >
    Boat
  </ChoiceChip>
</Stack>

Chips in different sizes

<Flex gap={1} flexWrap="wrap" alignItems="center">
  <ChoiceChip size="xs">Extra Small aka xs</ChoiceChip>
  <ChoiceChip size="sm">Small aka sm</ChoiceChip>
  <ChoiceChip size="md">Medium aka md</ChoiceChip>
  <ChoiceChip size="lg">Large aka lg</ChoiceChip>
</Flex>

Icon chips, choice chips and filter chips

<Stack flexDirection="row">
  <ChoiceChip 
    icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }}
    chipType="icon"
  > 
    Tog
  </ChoiceChip>
  <ChoiceChip 
    icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }}
    chipType="choice"
  >
    Tog
  </ChoiceChip>
  <ChoiceChip 
    icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }}
    chipType="filter"
  >
    Tog
  </ChoiceChip>
</Stack>

Different variants

<Stack flexDirection="row">
  <ChoiceChip 
    icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }}
    variant="base"
  > 
    Base
  </ChoiceChip>
  <ChoiceChip 
    icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }}
    variant="accent"
  >
    Accent
  </ChoiceChip>
  <ChoiceChip 
    icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }}
    variant="floating"
  >
    Tog
  </ChoiceChip>
</Stack>