Button

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-button/rh-button.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-button/rh-button.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-button/rh-button.js';
</script>
Copy to Clipboard Wrap lines

Usage

<rh-button>Primary</rh-button>

<script type="module">
  import '@rhds/elements/rh-button/rh-button.js';
</script>
Copy to Clipboard Wrap lines

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.

Slots 2
Slot Name Description
icon

Contains the button's icon or state indicator, e.g. a spinner.

Contains button text
Attributes 9
Attribute DOM Property Description Type Default
disabled disabled

Disables the button

 
boolean
 
false
type type

button type

 
'button' | 'submit' | 'reset' | undefined
 
unknown
label label

Accessible name for the button, use when the button does not have slotted text

 
string | undefined
 
unknown
value value

Form value for the button

 
string | undefined
 
unknown
name name

Form name for the button

 
string | undefined
 
unknown
icon icon

Shorthand for the icon slot, the value is icon name

 
IconNameFor<IconSetName> | undefined
 
unknown
icon-set iconSet

Icon set for the icon property - 'ui' by default

 
IconSetName | undefined
 
unknown
variant variant

Changes the style of the button.

  • Primary: Used for the most important call to action on a page. Try to limit primary buttons to one per page.
  • Secondary: Use secondary buttons for general actions on a page, that don’t require as much emphasis as primary button actions. For example, you can use secondary buttons where there are multiple actions, like in toolbars or data lists.
  • Tertiary: Tertiary buttons are flexible and can be used as needed.
 
| 'primary' | 'secondary' | 'tertiary' | 'close' | 'play'
 
'primary'
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.

 
boolean
 
false
Methods 1
Method Name Description
focus()
Events 0
None
CSS Shadow Parts 2
Part Name Description
button

Internal button element
icon

Container for the icon slot
CSS Custom Properties 0
None
Design Tokens 33
Token Copy
--rh-border-radius-default
--rh-border-width-md
--rh-border-width-sm
--rh-color-blue-70
--rh-color-border-strong-on-dark
--rh-color-border-strong-on-light
--rh-color-gray-40
--rh-color-gray-90-rgb
--rh-color-icon-secondary-on-dark
--rh-color-icon-secondary-on-light
--rh-color-interactive-primary-default-on-dark
--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-on-dark
--rh-color-text-primary-on-light
--rh-color-text-secondary-on-dark
--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-size-icon-02
--rh-space-lg
--rh-space-sm
Edit this page on GitHub