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$

The Button component wraps the native button element with tokenized variants, sizes, and motion defaults.

Basic$

Language

TSX

1import { Button } from "@glinui/ui"
2
3export function ButtonBasicDemo() {
4return <Button>Button</Button>
5}

Cursor$

TSX

1import { ArrowRight } from "lucide-react"
2import { Button } from "@glinui/ui"
3
4export function ButtonCursorDemo() {
5return (
6  <div className="flex items-center gap-2">
7    <Button variant="outline">Button</Button>
8    <Button size="sm" variant="outline" className="h-9 w-9 px-0" aria-label="Submit">
9      <ArrowRight className="size-4" />
10    </Button>
11  </div>
12)
13}

Examples$

Size$

Language

TSX

1import { Button } from "@glinui/ui"
2
3export function ButtonRtlDemo() {
4return (
5  <div dir="rtl" className="flex justify-center">
6    <div className="flex items-center gap-2">
7      <Button variant="glass">حفظ</Button>
8      <Button variant="outline">إلغاء</Button>
9    </div>
10  </div>
11)
12}

Variants$

Toggle backgrounds (top-right) to see how each variant adapts to different surfaces.

TSX

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

With Icon$

TSX

1import { ArrowRight } from "lucide-react"
2import { Button } from "@glinui/ui"
3
4export function ButtonWithIconDemo() {
5return (
6  <Button variant="liquid" className="gap-2">
7    Continue
8    <ArrowRight className="size-4" />
9  </Button>
10)
11}

Button Group$

TSX

1import { Button } from "@glinui/ui"
2
3export function ButtonGroupDemo() {
4return (
5  <div className="inline-flex items-center gap-1 rounded-full border border-border/60 bg-background/45 p-1">
6    <Button size="sm" className="rounded-full">Day</Button>
7    <Button size="sm" variant="ghost" className="rounded-full">Week</Button>
8    <Button size="sm" variant="ghost" className="rounded-full">Month</Button>
9  </div>
10)
11}

RTL$

Use dir="rtl" on a layout wrapper to mirror button flow for right-to-left locales.

TSX

1import { Button } from "@glinui/ui"
2
3export function ButtonRtlDemo() {
4return (
5  <div dir="rtl" className="flex justify-center">
6    <div className="flex items-center gap-2">
7      <Button variant="glass">حفظ</Button>
8      <Button variant="outline">إلغاء</Button>
9    </div>
10  </div>
11)
12}

Internationalized Labels$

Keep labels outside the component and inject locale strings. Code blocks in docs stay ltr for readability.

TSX

1import { Button } from "@glinui/ui"
2
3const copy = {
4  en: { save: "Save", cancel: "Cancel" },
5  ar: { save: "حفظ", cancel: "إلغاء" }
6}
7
8export function SaveActions({ locale = "en" }: { locale?: "en" | "ar" }) {
9  const t = copy[locale]
10
11  return (
12    <div dir={locale === "ar" ? "rtl" : "ltr"} className="flex gap-2">
13      <Button>{t.save}</Button>
14      <Button variant="ghost">{t.cancel}</Button>
15    </div>
16  )
17}

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 when needed.

Reduced Motion$

Button transitions use tokenized timing and disable transform-heavy motion when users enable prefers-reduced-motion.

API Reference$

The Button component is a wrapper around the native button element that adds variant styling, size control, and optional slot composition.

Prop	Type	Required	Default	Description
`asChild`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`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.

Source$

Import from @glinui/ui.

TSX

1import { Button } from "@glinui/ui"

Source files:

packages/ui/src/components/button.tsx

packages/ui/src/tests/button.test.tsx

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.