Button
Importing
Add rh-button to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-button/rh-button.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-button>Primary</rh-button>
<script type="module">
import '@rhds/elements/rh-button/rh-button.js';
</script>rh-button
A button is clickable text or an icon that triggers an action on the page or in the background. Depending on the action, content, and hierarchy, a button can be used on its own or grouped with other buttons.
| Slot Name | Description |
|---|---|
icon |
Contains the button's icon or state indicator, e.g. a spinner. |
|
Contains button text |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
disabled |
disabled |
Disables the button |
|
|
type |
type |
button type |
|
|
label |
label |
Accessible name for the button, use when the button does not have slotted text |
|
|
value |
value |
Form value for the button |
|
|
name |
name |
Form name for the button |
|
|
icon |
icon |
Shorthand for the |
|
|
icon-set |
iconSet |
Icon set for the |
|
|
variant |
variant |
Changes the style of the button.
|
|
|
danger |
danger |
Use danger buttons for actions a user can take that are potentially destructive or difficult/impossible to undo, like deleting or removing user data. |
|
|
| Method Name | Description |
|---|---|
focus() |
| Part Name | Description |
|---|---|
button |
Internal button element |
icon |
Container for the icon slot |
| Token | Copy |
|---|---|
--rh-border-radius-default
|
|
--rh-border-width-md
|
|
--rh-border-width-sm
|
|
--rh-color-blue-70
|
|
--rh-color-border-strong
|
|
--rh-color-gray-40
|
|
--rh-color-gray-90
|
|
--rh-color-icon-secondary
|
|
--rh-color-icon-secondary-on-dark
|
|
--rh-color-icon-secondary-on-light
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-interactive-primary-default-on-light
|
|
--rh-color-interactive-primary-hover-on-dark
|
|
--rh-color-interactive-primary-hover-on-light
|
|
--rh-color-red-30
|
|
--rh-color-red-60
|
|
--rh-color-surface-dark
|
|
--rh-color-surface-light
|
|
--rh-color-text-primary
|
|
--rh-color-text-primary-on-dark
|
|
--rh-color-text-primary-on-light
|
|
--rh-color-text-secondary
|
|
--rh-color-text-secondary-on-light
|
|
--rh-font-size-body-text-md
|
|
--rh-font-weight-body-text-regular
|
|
--rh-length-4xl
|
|
--rh-length-4xs
|
|
--rh-length-lg
|
|
--rh-line-height-body-text
|
|
--rh-opacity-50
|
|
--rh-opacity-80
|
|
--rh-space-lg
|
|
--rh-space-sm
|
|
