Components

CardSelect

A card select is a button that shows or hides a card on top of your UI

Examples

A basic card select

<CardSelect variant="base" size="md" label="Ways to travel">
  <Heading>Ways to travel</Heading>
  <Text>
    There are lots of ways to travel. Buses, trains and ferries are just three.
  </Text>
</CardSelect>

Different variants of card selects

<Stack flexDirection="row" gap={2}>
  <CardSelect variant="ghost" size="md" label="Ghost">
    <Text>Ghost</Text>
  </CardSelect>
  <CardSelect variant="base" size="md" label="Base">
    <Text>Base</Text>
  </CardSelect>
  <CardSelect variant="floating" size="md" label="Floating">
    <Text>Floating</Text>
  </CardSelect>
</Stack>

Different sizes of card selects

<Stack flexDirection="row" gap={2}>
  <CardSelect variant="base" size="sm" label="Small">
    <Text>Small</Text>
  </CardSelect>
  <CardSelect variant="base" size="md" label="Medium">
    <Text>Medium</Text>
  </CardSelect>
  <CardSelect variant="base" size="lg" label="Large">
    <Text>Large</Text>
  </CardSelect>
</Stack>

Card select with an icon

<CardSelect 
    variant="base" 
    size="md" 
    label="Ways to travel" 
    icon={<TrainOutline24Icon />}
  >
    <Text>Here is some more info</Text>
  </CardSelect>

Card selects without chevron:

<CardSelect 
    variant="base" 
    size="md" 
    label="Ways to travel" 
    icon={<TrainOutline24Icon />}
    withChevron={false}
  >
    <Text>Info about ways to travel</Text>
  </CardSelect>

Controllable card select

() => {
  const { isOpen, onClose, onToggle } = useDisclosure();
  return (
    <CardSelect 
      variant="base" 
      size="md" 
      label="Ways to travel" 
      onToggle={onToggle}
      isOpen={isOpen}
    >
      <Button variant="secondary" size="md" onClick={onClose}>
        Click to close
      </Button>
    </CardSelect>
  );
}