GButton
A simple styled button component.
Demo
Basic Usage
Variants
Icons
Disabled
Disabled buttons are still accessible via keyboard and screen readers because they use aria-disabled="true" instead of the disabled attribute. This means you can still tab to them and click on them, but the component doesn't emit the normal @click event. You will need to use @click:disabled if you want a different behavior when the button is disabled.
You can set disabled="lite" for a button that looks enabled, but still has aria-disabled="true" and emits @click:disabled when clicked.
Loading
INFO
The loading slot overrides the icon slot
API
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
variant | "neutral" | "primary" | "ghost" | "link" | undefined | "neutral" | No | |
disabled | boolean | "lite" | undefined | false | No | |
loading | boolean | undefined | false | No |
Slots
| Name | Type | Description |
|---|---|---|
loading | {} | |
icon | {} | |
default | {} |
Events
| Name | Type | Description |
|---|---|---|
click | [event: MouseEvent] | |
click:disabled | [event: MouseEvent] |