Button

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-button
  1. Usage
  2. rh-button

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-button/rh-button.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-button/rh-button.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-button/rh-button.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-button/rh-button.js": "./elements/rh-button/rh-button.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@rhds/elements/rh-icon/rh-icon.js": "./elements/rh-icon/rh-icon.js",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@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/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

Usage

rh-button

Slots 2
Slot Name Description
icon

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

Contains button text
Attributes 9
DOM Property Description Type Default
disabled

Disables the button

 
boolean

false
type

button type

 
'button' | 'submit' | 'reset' | undefined

unknown
label

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

 
string | undefined

unknown
value

Form value for the button

 
string | undefined

unknown
name

Form name for the button

 
string | undefined

unknown
icon

Shorthand for the icon slot, the value is icon name

 
IconNameFor<IconSetName> | undefined

unknown
iconSet

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

 
IconSetName | undefined

unknown
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

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