#Basic

<Button>Example</Button>

#Handle click

Passing onClick works because of ...rest.
<Button onClick={onClick}>Example</Button>

#Variant

Set variant to either "primary", "secondary", or "tertiary". Defaults to "secondary".
<Flex class="gap-3">
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="tertiary">Tertiary</Button>
</Flex>

#Danger variants

Set variant to either "danger-primary", "danger-secondary", or "danger-tertiary".

<Flex class="gap-3">
  <Button variant="danger-primary">Primary</Button>
  <Button variant="danger-secondary">Secondary</Button>
  <Button variant="danger-tertiary">Tertiary</Button>
</Flex>

#Size

Set size to either "sm", "md", "lg", or "block". Defaults to "md".

<Stack class="gap-5">
  <Flex class="gap-3">
    <Button variant="primary" size="sm">Primary</Button>
    <Button variant="secondary" size="sm">Secondary</Button>
    <Button variant="tertiary" size="sm">Tertiary</Button>
  </Flex>
  <Flex class="gap-3">
    <Button variant="primary" size="md">Primary</Button>
    <Button variant="secondary" size="md">Secondary</Button>
    <Button variant="tertiary" size="md">Tertiary</Button>
  </Flex>
  <Flex class="gap-3">
    <Button variant="primary" size="lg">Primary</Button>
    <Button variant="secondary" size="lg">Secondary</Button>
    <Button variant="tertiary" size="lg">Tertiary</Button>
  </Flex>
  <Stack class="w-full gap-3">
    <Button variant="primary" size="block">Primary</Button>
    <Button variant="secondary" size="block">Secondary</Button>
  </Stack>
</Stack>

#Rounded

Set rounded to either "square", "sm", "lg", or "full". Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
<Stack class="gap-5">
  <Flex class="gap-3">
    <Button variant="primary" rounded="square">Primary</Button>
    <Button variant="secondary" rounded="square">Secondary</Button>
    <Button variant="tertiary" rounded="square">Tertiary</Button>
  </Flex>
  <Flex class="gap-3">
    <Button variant="primary" rounded="sm">Primary</Button>
    <Button variant="secondary" rounded="sm">Secondary</Button>
    <Button variant="tertiary" rounded="sm">Tertiary</Button>
  </Flex>
  <Flex class="gap-3">
    <Button variant="primary" rounded="lg">Primary</Button>
    <Button variant="secondary" rounded="lg">Secondary</Button>
    <Button variant="tertiary" rounded="lg">Tertiary</Button>
  </Flex>
  <Flex class="gap-3">
    <Button variant="primary" rounded="full">Primary</Button>
    <Button variant="secondary" rounded="full">Secondary</Button>
    <Button variant="tertiary" rounded="full">Tertiary</Button>
  </Flex>
</Stack>

#Disabled

Set disabled to either true or false. Defaults to false.
<Flex class="gap-3">
  <Button disabled variant="primary">Primary</Button>
  <Button disabled variant="secondary">Secondary</Button>
  <Button disabled variant="tertiary">Tertiary</Button>
</Flex>

#Loading

Set isLoading to either true or false. Defaults to false.

Set loadingContent to the content you want to display when isLoading is true.

<Flex class="gap-3">
  <Button variant="primary" isLoading loadingContent="Loading...">
    Primary
  </Button>
  <Button variant="secondary" isLoading loadingContent="Loading...">
    Secondary
  </Button>
  <Button variant="tertiary" isLoading loadingContent="Loading...">
    Tertiary
  </Button>
</Flex>

#With icon

Icons should typically appear to the left of the other content in the button.
<Button>
  <span>＋</span> Example
</Button>

#Props

variant
Required
false
Type
"primary" | "secondary" | "tertiary" | "danger-primary" | "danger-secondary" | "danger-tertiary"
Default
"secondary"
size
Required
false
Type
"sm" | "md" | "lg" | "block"
Default
"md"
rounded
Required
false
Type
"square" | "sm" | "lg" | "full"
Default
none
Notes
Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
isLoading
Required
false
Type
boolean
Default
false
Notes
When true, the button will appear disabled.
loadingContent
Required
false
Type
string
Default
none
Notes
The text to change the button's content to when loading. Ie. when isLoading is true.
children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
Omit<ComponentProps<"button">, "icon" | "size">
Default
none
Notes
See the docs for rest parameters. For Button, you could pass anything you normally would pass to <button> because the container looks something like this:
<button class={className} {...restWithoutClass}>
  ...
</button>