Button

Action control with variants, semantic colors, sizes, and a loading state.

When to use

Use Button when you need action control with variants, semantic colors, sizes, and a loading state.

Import

TypeScript

import { Button } from '@gzodo/ui'

Use Button for commands. One primary button per view; outline, ghost, and text for everything else. Pass href to render a link with the same surface.

Examples

Variants

variant picks the surface. primary is the main action. outline, ghost, and text are quieter. base uses the page background.

Color and variant

Set color and variant together. Color tints the surface; it does not replace the variant.

Sizes

sm 22px, md 28px, lg 32px, xl 37px. Default is md.

Loading

isLoading shows a spinner, sets aria-busy, and disables the control so the action cannot be submitted twice.

Disabled

Disabled buttons do not fire click handlers and use the muted control opacity.

Docs Installation

Link

A href renders an anchor with the button surface. Disabled and loading links drop the href.

Alignment

textAlignment is useful with fullWidth, when the label should sit left or right inside the button.

Button

Property

Description

Type

Default

size

Fixed height of the control.

'sm' | 'md' | 'lg' | 'xl'

'md'

variant

Surface treatment. Primary is the main action.

—

color

Semantic color layered on top of the variant.

'danger' | 'success' | 'warning'

—

fullWidth

Stretch the control to the container width.

boolean

false

disabled

Blocks interaction and lowers opacity.

boolean

false

className

Extra classes, merged with the component classes.

string

—

children

Label, icon, or both.

ReactNode

—

isLoading

Shows a spinner and disables the control.

boolean

false

textAlignment

Horizontal alignment of the label.

'left' | 'center' | 'right'

'center'

href

Renders an anchor instead of a button.

string

—

as

Custom element or link component.

ElementType

—

type

Native button type. Ignored when href is set.

'button' | 'submit' | 'reset'

'button'

Tailwind

ButtonGroup