Button

Installation

Usage

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

export default function App() {
  return <Button variant="strong">Click me</Button>
}

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

export default function App() {
  return <Button variant="strong">Click me</Button>
}

Examples

Sizes

Use the size prop for the standard button scale. md is the default.

Default

A standard glass button for most actions.

Glass Soft

A softer glass treatment for lower-emphasis actions.

Glass Strong

A stronger glass treatment for primary actions.

Transparent

Uses a transparent surface with the standard glass border and shadow for lower-emphasis actions that still need definition.

Disabled

Displays the disabled state, which automatically reduces opacity and disables pointer events while maintaining the glass aesthetic.

Combinations

Use variants to establish visual hierarchy before reaching for custom classes.

Link

Use asChild when you need link semantics while keeping one composition convention across React and Astro. Wrap the semantic element you want to style, such as an anchor.

Icon

Use size="icon-sm", size="icon", or size="icon-lg" for icon-only actions.

With Icon

You can easily add icons to your buttons.

With Spinner

Displays a loading state using an animated spinner icon.

Styling

Button now uses a prop-first API. Reach for variant and size first. Use className as an escape hatch for one-off layout or visual tweaks.

/* Variants */
<Button variant="default" />
<Button variant="soft" />
<Button variant="strong" />
<Button variant="transparent" />
<Button variant="ghost" />

/* Sizes (defaults to md) */

<Button size="sm" />
<Button size="icon-sm" />
<Button size="md" />
<Button size="icon" />
<Button size="lg" />
<Button size="icon-lg" />

/* Icon */

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

/* Variants */
<Button variant="default" />
<Button variant="soft" />
<Button variant="strong" />
<Button variant="transparent" />
<Button variant="ghost" />

/* Sizes (defaults to md) */

<Button size="sm" />
<Button size="icon-sm" />
<Button size="md" />
<Button size="icon" />
<Button size="lg" />
<Button size="icon-lg" />

/* Icon */

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

API Reference