Button Component
A customizable button component with various styles and states.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Whether the button is disabled. |
type | 'button' | 'submit' | 'reset' | undefined | The type of the button. |
value | string | undefined | The value associated with the button. |
name | string | undefined | The name associated with the button. |
label | string | undefined | The accessible label for the button. |
loading | boolean | false | Whether the button is in a loading state. |
size | 'small' | 'medium' | 'large' | 'medium' | The size of the button. |
variant | 'primary' | 'ghost' | 'naked' | 'elevated' | 'destructive' | 'brand' | 'primary' | The variant style of the button. |
Slots
| Name | Description |
|---|---|
default | buttons content |
CSS Parts
| Name | Description |
|---|---|
button | The button element. |
Check this link to learn how to use CSS parts for Button Component.
CSS Properties
| Token | Default | Description |
|---|---|---|
--tap-font-family | --tap-sys-font-family | The font family for the button. |
--tap-sys-radius-full | - | The border radius for the button. |
--tap-button-color-surface-cover | --tap-sys-color-surface-overlay-light | The surface cover color for the button. |
--tap-sys-color-surface-overlay-light | - | The overlay light color for the button. |
--tap-sys-color-surface-disabled | - | The disabled surface color for the button. |
--tap-button-color-surface-disabled | --tap-sys-color-surface-disabled | The disabled surface color for the button. |
--tap-sys-spacing-9 | - | The spacing for the small button height. |
--tap-sys-spacing-10 | - | The spacing for the medium button height. |
--tap-sys-spacing-11 | - | The spacing for the large button height. |
--tap-sys-spacing-5 | - | The spacing for the small button padding. |
--tap-sys-spacing-6 | - | The spacing for the medium button padding. |
--tap-sys-spacing-8 | - | The spacing for the large button padding. |
--tap-button-typography-label-sm-height | --tap-sys-typography-label-sm-height | The line height for the small button label. |
--tap-button-typography-label-sm-size | --tap-sys-typography-label-sm-size | The font size for the small button label. |
--tap-button-typography-label-sm-weight | --tap-sys-typography-label-sm-weight | The font weight for the small button label. |
--tap-button-typography-label-md-height | --tap-sys-typography-label-sm-height | The line height for the medium button label. |
--tap-button-typography-label-md-size | --tap-sys-typography-label-sm-size | The font size for the medium button label. |
--tap-button-typography-label-md-weight | --tap-sys-typography-label-sm-weight | The font weight for the medium button label. |
--tap-button-typography-label-lg-height | --tap-sys-typography-label-lg-height | The line height for the large button label. |
--tap-button-typography-label-lg-size | --tap-sys-typography-label-lg-size | The font size for the large button label. |
--tap-button-typography-label-lg-weight | --tap-sys-typography-label-lg-weight | The font weight for the large button label. |
--tap-button-color-surface-inverse-primary | --tap-sys-color-surface-inverse-primary | The surface color for the primary variant. |
--tap-sys-color-surface-inverse-primary | - | The surface color for the primary variant. |
--tap-button-color-content-on-inverse | --tap-sys-color-content-on-inverse | The content color on inverse surface. |
--tap-sys-color-content-on-inverse | - | The content color on inverse surface. |
--tap-button-color-surface-tertiary | --tap-sys-color-surface-tertiary | The surface color for the ghost variant. |
--tap-sys-color-surface-tertiary | - | The surface color for the ghost variant. |
--tap-button-color-content-primary | --tap-sys-color-content-primary | The content color for the primary variant. |
--tap-sys-color-content-primary | - | The content color for the primary variant. |
--tap-button-color-surface-primary | --tap-sys-color-surface-primary | The surface color for the elevated variant. |
--tap-sys-color-surface-primary | - | The surface color for the elevated variant. |
--tap-button-color-surface-destructive | --tap-sys-color-surface-negative-light | The surface color for the destructive variant. |
--tap-sys-color-surface-negative-light | - | The surface color for the destructive variant. |
--tap-button-color-content-destructive | --tap-sys-color-content-negative | The content color for the destructive variant. |
--tap-sys-color-content-negative | - | The content color for the destructive variant. |
--tap-button-color-gradient-brand | --tap-sys-color-gradient-brand | The gradient color for the brand variant. |
--tap-sys-color-gradient-brand | - | The gradient color for the brand variant. |