2.22.0Button Component in Bolt
Button is a branded component to convey call to action. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-button
Buttons are the core of our action components. Their affordance is immediate and can be use for most actions and allow users to access the target with a single interaction. Buttons clearly provide a next step for the user.
Our Buttons depend on the theme they are contained in and change in appearance based on said theme. The themes and button colors were designed together to ensure the proper amount affordance and clarity.
Text button: white text with chevron
Currently only have one defined size (though other options can and will be defined in the future)
{% include "@bolt-components-button/button.twig" with {
text: "This is a button"
} only %}
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
| attributes | A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
| text * | Text inside the button. |
string
| — |
|
| transform | Transforms the button text to various cases. |
string
|
none
|
|
| type | Determines the button tag type for semantic buttons |
string
| — |
|
| size | Size of the button. |
string
|
medium
|
|
| style | Style of the button determined by information hierarchy. |
string
|
primary
|
|
| width | Controls the width of the button. |
string
|
auto
|
|
| border_radius | Rounds the corners of the button. |
string
|
regular
|
|
| align | Horizontal alignment of items (text and icon) inside the button. Note: the values left and right are deprecated, use start and end instead. |
string
|
center
|
|
| icon | Icon data as expected by the icon component. Accepts an additional position prop that determines placement within the link. |
object
| — |
|
| iconOnly | Make the button to display only the icon and hide the text (which is still required). You are required to pass both text and icon data for this option to work. |
boolean
|
false
|
|
| url | If present, users will be directed to this URL when clicking this element. |
string
| — |
|
| target | A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present. |
string
|
_self
|
|
| disabled | Whether the click action should be disabled for this element. |
boolean
|
false
|
|
| onClick | When used with onClickTarget, an event to fire on the targeted elements when this element is clicked. When used without onClickTarget, arbitrary javascript to execute when this element is clicked. |
string
| — |
|
| onClickTarget | Requires onClick. A CSS selector for elements that the onClick event will fire on when this element is clicked. |
string
| — |
|
| itemAlignment | Use the align parameter instead. |
| — |
|
| rounded | Use the border_radius parameter instead. |
| — |
|
| tag | Switch to using the new type prop instead. |
string
|
button
|
|
Note: interactive states only appear when the user interacts with the button, they are not styles that are available for use.
Note: full@small means that the button will go from auto width to full width when the browser goes below the small breakpoint.
Note: when passing icons inside a button, it is required to define the icon's position, by default it is set to after, which means the icon will come after the text.
Note: an icon-only button still is still required to have text, and that text is accessible through screen readers. It's just visually hidden.