Button

A control for a single action. Six variants across eight colour sets, ten sizes, and `asChild` to render as any element. Destructive is a colour, not a variant.

src/components/ui/button.tsx

About

From the component's own source, where it was written.

Every variant reads the --ui-* set, so color restyles all of them at once.

Press lands instantly: active:duration-0 skips the transition on the way down so the button answers the click, while the release eases back. Colour carries most of it; pressable adds 3% of scale, which is a transform and so costs no layout and cannot reflow the row it sits in.

Install

npx astralyx-ui add button

Usage

import { Button } from '@/components/ui/button'

<Button variant="outline" color="blue" size="lg">
  Click me
</Button>

Composer

Change the props and the source below follows.

Props

variant

color

size

children

tint

with icondisabled

tsx

<Button>
  Button
</Button>

Examples

Variants

tsx

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button color="destructive">Destructive</Button>
<Button variant="link">Link</Button>

Colored — solid

tsx

<Button variant="colored" color="blue">Blue</Button>
<Button variant="colored" color="violet">Violet</Button>
<Button variant="colored" color="green">Green</Button>

Colored — secondary

tsx

<Button variant="secondary" color="blue">Blue</Button>
<Button variant="secondary" color="amber">Amber</Button>

Colored — outline and ghost

tsx

<Button variant="outline" color="blue">Blue</Button>
<Button variant="ghost" color="rose">Rose</Button>

Custom colour via tint

tsx

<Button tint="#7c3aed">Solid</Button>
<Button tint="#7c3aed" variant="secondary">Secondary</Button>
<Button tint="#7c3aed" variant="outline">Outline</Button>
<Button tint="#7c3aed" variant="ghost">Ghost</Button>

// any CSS colour works, including a token
<Button tint="oklch(0.7 0.18 140)">oklch</Button>
<Button tint="var(--chart-4)">var()</Button>

Sizes

tsx

<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra large</Button>

Icon sizes

tsx

<Button size="icon-xs" aria-label="Add"><Plus /></Button>
<Button size="icon-sm" aria-label="Add"><Plus /></Button>
<Button size="icon" aria-label="Add"><Plus /></Button>
<Button size="icon-lg" aria-label="Add"><Plus /></Button>
<Button size="icon-xl" aria-label="Add"><Plus /></Button>

States

tsx

<Button disabled>Disabled</Button>
<Button variant="outline" disabled>
  Disabled
</Button>
<Button aria-invalid>Invalid</Button>

With icon

tsx

<Button>
  <Sun /> Light
</Button>
<Button variant="outline">
  <Moon /> Dark
</Button>

asChild — render as a link

tsx

<Button asChild variant="outline">
  <a href="https://vite.dev" target="_blank" rel="noreferrer">
    Open Vite docs
  </a>
</Button>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Button`

Every variant reads the --ui-* set, so color restyles all of them at once.

Extends Omit<ComponentProps<'button'>, 'color'>.

Prop	Type	Default	Description
color	'neutral' \| 'blue' \| 'violet' \| 'cyan' \| 'green' \| 'amber' \| 'rose' \| 'destructive'	'neutral'	Named colour set. Drives fill, text, tint and border together. Ignored when tint is set.
variant	'link' \| 'default' \| 'colored' \| 'secondary' \| 'outline' \| 'ghost'	'default'	Which treatment to use. All of them read the active colour set.
size	'sm' \| 'default' \| 'xs' \| 'lg' \| 'xl' \| 'icon-xs' \| 'icon-sm' \| 'icon' \| 'icon-lg' \| 'icon-xl'	'default'	Height, padding, icon size and corner radius as one step. icon-* sizes are square.
asChild	boolean	false	Render the single child element instead of a <button>, keeping every style. Useful for links.
tint	string	—	Any CSS colour, used instead of a named set. Fill, text, hover and border are all derived from it.
disabled	boolean	false	Native disabled state; drops opacity and blocks pointer events.

Functions

Function	Signature	Description
buttonVariants	(props?: { variant?: 'link' \| 'default' \| 'colored' \| 'secondary' \| 'outline' \| 'ghost'; color?: 'neutral' \| 'blue' \| 'violet' \| 'cyan' \| 'green' \| 'amber' \| 'rose' \| 'destructive'; size?: 'sm' \| 'default' \| 'xs' \| 'lg' \| 'xl' \| 'icon-xs' \| 'icon-sm' \| 'icon' \| 'icon-lg' \| 'icon-xl' }) => string	—

Types

Type	Definition	Description
`ColorSet`	keyof typeof colorSet	—