atom

`gy-button`

Base action primitive of the gyrum design system; variant and size drive the visual contract, disabled and loading drive behaviour.

Live

What you ship.

variant="primary"

Ship it

variant="secondary"

Ship it

variant="ghost"

Ship it

variant="danger"

Ship it

<gy-button variant="primary" size="md">Ship it</gy-button>

Tier atom

Tag gy-button

Variants primary · secondary · ghost · danger

Sizes sm · md · lg

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'danger'`	`'primary'`	Visual emphasis. `primary` is the default call-to-action.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control density. `md` is the default.
`disabled`	`boolean`	`false`	Disables interaction and blocks the click.
`loading`	`boolean`	`false`	Shows an inline spinner and blocks the click while an async action runs.
`fullWidth`	`boolean`	`false`	Stretches the button to the full width of its container.
`onclick`	`(ev: CustomEvent<MouseEvent>) => void; /** The button label. */ children?: Snippet;`	no default	Handler for the gy-click CustomEvent. Suppressed while disabled or loading.

import '@gyrum-labs/components/button/button.js';