Button

A clickable component used to trigger an action or event.

Variants

Solid

<Button variant="solid" onClick={() => {}}>
  solid
</Button>

Outline

<Button variant="outline" onClick={() => {}}>
  outline
</Button>

Subtle

<Button variant="subtle" onClick={() => {}}>
  subtle
</Button>

Ghost

<Button variant="ghost" onClick={() => {}}>
  ghost
</Button>

Danger

<Button variant="danger" onClick={() => {}}>
  danger
</Button>

Success

<Button variant="success" onClick={() => {}}>
  success
</Button>

Dark

<Button variant="dark" onClick={() => {}}>
  dark
</Button>

Solid (with override)

<div style={{"--override-primary":"var(--purple-9)"}}>
  <Button variant="solid" onClick={() => {}}>
    Custom Solid
  </Button>
</div>

Size: small

<Button size="small">
  Small
</Button>

Size: base

<Button size="base">
  Base
</Button>

Size: large

<Button size="large">
  Large
</Button>

Size: icon

<Button size="icon">
  Icon
</Button>

Size: none

<Button size="none">
  No size
</Button>

Size: small

<Button size="small">
  <ny className="size-3.5" />
  Small
</Button>

Size: base

<Button size="base">
  <ny className="size-4" />
  Base
</Button>

Size: large

<Button size="large">
  <ny className="size-4.5" />
  Large
</Button>

Size: icon

<Button size="icon">
  <ny className="size-4" />
  
</Button>

Size: none

<Button size="none">
  <ny className="size-4" />
  No size
</Button>

Default

<Button>
  Default
</Button>

Disabled

<Button disabled={true}>
  Disabled
</Button>

Shape: rounded

<Button shape="rounded">
  rounded
</Button>

Shape: md

<Button shape="md">
  md
</Button>

Shape: rect

<Button shape="rect">
  rect
</Button>