2.17.0Button Group Component in Bolt
Button-group can contain multiple buttons. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-button-group
Button groups are a horizontal set of actions with a hierarchy that defines the spacing and their relationship between each other. This set of actions help people under stand their options with potential next steps.
Button padding left is 1rem when there are multiple buttons in a horizontal row.
NOTE: We currently do not have joined buttons (eg, no gap, single button with two sides), but this is something to consider moving forward.
{% include "@bolt-components-button-group/button-group.twig" with {
buttons: [
{
text: "Learn More",
style: "primary"
},
{
text: "About Pega",
style: "secondary"
}
]
} 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) |
|---|---|---|---|---|
|
|
Html tag to wrap the button group. |
string
| — |
|
|
|
An array of button objects. |
array
| — |
|
|
|
An array of bolt objects. |
array
| — |
|
|
|
A string of content to place in the button group. |
string
| — |
|