Button
Button is used to trigger some actions.
Demos
Basic
There are
secondary, primary, info, success, warning, danger and ghost button types. <gk-button variant="secondary">Default</gk-button>
<gk-button variant="primary">Primary</gk-button>
<gk-button variant="info">Info</gk-button>
<gk-button variant="success">Success</gk-button>
<gk-button variant="warning">Warning</gk-button>
<gk-button variant="danger">Danger</gk-button>
<gk-button variant="ghost">Ghost</gk-button>Secondary
Secondary buttons have a lighter fill than solid variants.
<gk-button secondary>Default</gk-button>
<gk-button variant="primary" secondary>Primary</gk-button>
<gk-button variant="info" secondary>Info</gk-button>
<gk-button variant="success" secondary>Success</gk-button>
<gk-button variant="warning" secondary>Warning</gk-button>
<gk-button variant="danger" secondary>Danger</gk-button>Size
Buttons can be
sm, md and lg in size. <gk-button size="sm">Small</gk-button>
<gk-button size="md">Medium</gk-button>
<gk-button size="lg">Large</gk-button>Dashed
Dashed buttons use a dashed border style.
<gk-button dashed>Default</gk-button>
<gk-button variant="primary" dashed>Primary</gk-button>
<gk-button variant="info" dashed>Info</gk-button>
<gk-button variant="success" dashed>Success</gk-button>
<gk-button variant="warning" dashed>Warning</gk-button>
<gk-button variant="danger" dashed>Danger</gk-button>Text
Text buttons have no background or border until hovered.
<gk-button text>Default</gk-button>
<gk-button variant="primary" text>Primary</gk-button>
<gk-button variant="info" text>Info</gk-button>
<gk-button variant="success" text>Success</gk-button>
<gk-button variant="warning" text>Warning</gk-button>
<gk-button variant="danger" text>Danger</gk-button>Quaternary
quaternary is a quiet transparent button (Naive quaternary). Use it for icon or menu triggers. <gk-button quaternary>More</gk-button>
<gk-button quaternary aria-label="More actions">⋯</gk-button>Disabled
Buttons can be disabled.
<gk-button disabled>Disabled</gk-button>
<gk-button variant="primary" disabled>Primary</gk-button>
<gk-button variant="danger" disabled>Error</gk-button>Loading
Buttons can have loading states.
<gk-button loading>Loading</gk-button>
<gk-button variant="primary" loading>Primary</gk-button>
<gk-button variant="info" loading>Info</gk-button>Ghost
Ghost buttons have transparent backgrounds.
<gk-button variant="ghost">Ghost</gk-button>
<gk-button variant="ghost" size="lg">Large Ghost</gk-button>Tag
You can render buttons as links with the
href prop. <gk-button href="/guide/getting-started">Getting started</gk-button>
<gk-button variant="info" href="/components/button">Button docs</gk-button>Button group
Group related buttons with
gk-button-group. <gk-button-group>
<gk-button variant="secondary">Left</gk-button>
<gk-button variant="secondary">Middle</gk-button>
<gk-button variant="secondary">Right</gk-button>
</gk-button-group>
<gk-button-group>
<gk-button variant="primary">Live a</gk-button>
<gk-button variant="primary">Sufficient</gk-button>
<gk-button variant="primary">Life</gk-button>
</gk-button-group>Playground
Try combinations of props interactively.
API
Button Props
| Prop | Type | Default |
|---|---|---|
variant | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'ghost' | 'primary' |
size | 'sm' | 'md' | 'lg' | 'md' |
type | 'button' | 'submit' | 'reset' | 'button' |
disabled | boolean | false |
loading | boolean | false |
secondary | boolean | false |
dashed | boolean | false |
text | boolean | false |
quaternary | boolean | false |
href | string | — |
Button Slots
| Name | Description |
|---|---|
| default | Button label content |
ButtonGroup
| Name | Description |
|---|---|
| default | Grouped gk-button children |
CSS Parts
| Part | Description |
|---|---|
base | Interactive element (button or a) |
label | Label wrapper |
spinner | Loading indicator |