Button

Installation

Usage

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

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

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

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

As link

Use as="a" for navigation and always provide href.

<Button as="a" href="/docs" className="glass">
  Read the docs
</Button>

<Button as="a" href="/docs" className="glass">
  Read the docs
</Button>

Examples

Sizes

Use the size classes (btn-sm, btn-md, btn-lg) to change the button’s dimensions. If no size class is provided, the button defaults to btn-md.

Default

A basic button without any glass utility classes. It provides the base structure and transparent background.

Glass

The standard glassmorphism effect. It combines backdrop blur, subtle borders, and a translucent background.

Glass Soft

A softer, highly transparent glass effect. Ideal for secondary actions that shouldn’t draw too much attention.

Glass Strong

A pronounced glass effect with higher opacity. Perfect for primary calls to action (CTAs) resting over complex backgrounds.

Disabled

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

Combinations

You can mix and match different glass classes to establish a clear visual hierarchy in your interfaces.

Icon

Use the btn-icon class to create a perfectly square button.

With Icon

You can easily add icons to your buttons.

With Spinner

Displays a loading state using an animated spinner icon.

Styling

There are no variant or size props. The styling and dimensions are controlled entirely using classes, keeping the component perfectly composable and aligned with the utility-first approach.

/* Visual Styles */
<Button className="glass" />
<Button className="glass glass-soft" />
<Button className="glass glass-strong" />

/* Sizes (Defaults to md) */
<Button className="glass btn-sm" />
<Button className="glass btn-lg" />

/* Icon */
<Button className="glass btn-icon">
  <Icon />
</Button>

/* Visual Styles */
<Button className="glass" />
<Button className="glass glass-soft" />
<Button className="glass glass-strong" />

/* Sizes (Defaults to md) */
<Button className="glass btn-sm" />
<Button className="glass btn-lg" />

/* Icon */
<Button className="glass btn-icon">
  <Icon />
</Button>

API

• Default render: native <button> for actions and form submits.
• as: render another element such as <a> while keeping Button styling.
• as="a": use for navigation and provide href.