Components

PressableCard

The `PressableCard` component can be used to create a card that responds to user interactions. It can be rendered as a button, link, label, or any other HTML element by specifying the `as` prop. If no `as` prop is provided, it defaults to a button.

Examples

<PressableCard onClick={() => console.log} padding={4}>
  A simple pressable card
</PressableCard>

Different variants of PressableCard

<Flex gap={2} flexWrap="wrap">
  <PressableCard variant="base" onClick={() => console.log} padding={4}>
    Base
  </PressableCard>
  <PressableCard variant="floating" onClick={() => console.log} padding={4}>
    Floating
  </PressableCard>
  <PressableCard variant="accent" onClick={() => console.log} padding={4}>
    Accent
  </PressableCard>
</Flex>