Buttons

Jump to Section

Variants

<Box display="flex" flexWrap="wrap" gap={3}>
  <Button>
    Default
  </Button>
  <Button variant="action">
    Action
  </Button>
  <Button variant="primary">
    Primary
  </Button>
</Box>

Size

<Box alignItems="center" display="flex" flexWrap="wrap" gap={3}>
  <Button size="small">
    Small
  </Button>
  <Button size="default">
    Default
  </Button>
  <Button size="large">
    Large
  </Button>
</Box>

Loading

<Button isLoading>
  Default
</Button>

Disabled

<Button disabled>
  Default
</Button>

Custom

<
  __EMOTION_TYPE_PLEASE_DO_NOT_USE__={function noRefCheck() {}}
  backgroundColor="purple"
  color="#ffff00"
  css={{
    name: '1yuaq3k',
    styles: '&:hover{background-color:blue;}'
  }}
>
  Custom
</>

Button Group

<Box display="flex" flexDirection="column" gap={3}>
  <ButtonGroup>
    <Button>
      Button 1
    </Button>
    <Button>
      Button 2
    </Button>
    <Button>
      Button 3
    </Button>
  </ButtonGroup>
  <ButtonGroup isLoading variant="primary">
    <Button>
      Button 1
    </Button>
    <Button>
      Button 2
    </Button>
    <Button>
      Button 3
    </Button>
  </ButtonGroup>
</Box>

With Icon

<Box display="flex" gap={3}>
  <Button startIcon={<SearchIcon />}>
    Default
  </Button>
  <Button endIcon={<SearchIcon />}>
    Default
  </Button>
</Box>

Icon Only

<Box alignItems="center" display="flex" gap={3}>
  <IconButton size="small" variant="primary">
    <SearchIcon />
  </IconButton>
  <IconButton variant="primary">
    <SearchIcon />
  </IconButton>
  <IconButton size="large" variant="primary">
    <SearchIcon />
  </IconButton>
</Box>

Icon Only Group

<ButtonGroup size="large">
  <IconButton>
    <JoyIcon />
  </IconButton>
  <IconButton>
    <JoyIcon />
  </IconButton>
  <IconButton>
    <JoyIcon />
  </IconButton>
</ButtonGroup>