Primitive / Atomstable

Button

Action control with default, glass, liquid, matte, glow, outline, and ghost variants.

@glinui/uiComponent: button

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add button

Usage

Basic

TSX

1import { Button } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="flex gap-3">
6      <Button>Default</Button>
7      <Button variant="outline">Outline</Button>
8      <Button variant="ghost">Ghost</Button>
9    </div>
10  )
11}

Variants

TSX

1import { Button } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="flex flex-wrap gap-2">
6      <Button>Default</Button>
7      <Button variant="glass">Glass</Button>
8      <Button variant="liquid">Liquid</Button>
9      <Button variant="matte">Matte</Button>
10      <Button variant="glow">Glow</Button>
11      <Button variant="outline">Outline</Button>
12      <Button variant="ghost">Ghost</Button>
13    </div>
14  )
15}

Sizes

TSX

1import { Button } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="flex items-end gap-2">
6      <Button size="sm">Small</Button>
7      <Button size="md">Medium</Button>
8      <Button size="lg">Large</Button>
9    </div>
10  )
11}

Accessibility

Native `button` semantics by default.
Visible focus ring via tokenized accent color.
`disabled` state blocks interaction and lowers visual emphasis.
Supports `asChild` for semantic link rendering.

Keyboard Interactions

Key	Action
`Enter`	Activate the button.
`Space`	Activate the button.

ARIA Attributes

`role="button"` native
`aria-disabled` when disabled

Reduced Motion

Transitions use tokenized timing and disable transform-heavy motion with `prefers-reduced-motion`.

Affected properties

transformopacitybox-shadowbackground-color

API Reference

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "frosted" \| "liquid" \| "matte" \| "glow" \| "outline" \| "ghost"`	No	`default`	Visual treatment.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Height and horizontal padding scale.
`asChild`	`boolean`	No	`false`	Renders child element with button styles.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Button } from "@glinui/ui"

Source Files

button.tsx

button.test.tsxtest

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/button.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

ButtonProps

`ButtonProps`

Prop	Type	Required	Default	Description
`asChild`	`boolean`	No	`false`	-
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from buttonVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "liquid" \| "matte" \| "glow" \| "outline" \| "ghost"`	No	`"default"`	Variant option from buttonVariants.