Button


import { Button } from '@gg-software/ui';
 
<Button variant="primary">Primary</Button>
<Button>Default</Button>
<Button variant="dashed">Dashed</Button>
<Button variant="text">Text</Button>
<Button variant="link">Link</Button>

Danger, disabled, loading

danger is a tone applied on top of the variant, not a variant itself.


<Button danger variant="primary">Delete</Button>
<Button danger>Remove</Button>
<Button disabled>Disabled</Button>
<Button loading variant="primary">Saving…</Button>

Sizes & block


<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
 
// full container width
<Button block variant="primary">Sign in</Button>

Icons

Content can come from children or the label prop; iconLeft / iconRight add icon slots. Icon-only buttons (no text) are auto-detected — but prefer IconButton, which enforces an accessible name.


<Button iconLeft={<PlusIcon />}>Add item</Button>
<Button iconRight={<ChevronDownIcon />}>Options</Button>

Props

Prop	Type	Default	Description
`label`	`string`	—
`children`	`ReactNode`	—	content rendered inside the component
`variant`	`"default" \| "primary" \| "text" \| "dashed" \| "link"`	`default`
`size`	`"sm" \| "md" \| "lg"`	`md`
`danger`	`boolean`	`false`	danger tone, applied on top of the variant
`block`	`boolean`	`false`	stretch to the full width of the container
`disabled`	`boolean`	`false`
`loading`	`boolean`	`false`
`iconLeft`	`ReactNode`	—
`iconRight`	`ReactNode`	—
`type`	`"button" \| "submit" \| "reset"`	`button`
`className`	`string`	—
`onClick`	`(() => void)`	—

* required · generated from packages/ui/src/input/Button/Button.tsx