button group docs

Button Group

An inline list of buttons.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage 
  {% set button_1 %}
  {% include "@bolt-components-button/button.twig" with {
    text: "Learn More",
    hierarchy: "primary"
  } only %}
{% endset %}

{% set button_2 %}
  {% include "@bolt-components-button/button.twig" with {
    text: "About Pega",
    hierarchy: "secondary"
  } only %}
{% endset %}

{% include "@bolt-components-button-group/button-group.twig" with {
  buttons: [
    button_1,
    button_2
  ]
} %}
Schema
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)
tag

Set the HTML tag for the button group container.

 string —
  • ul or ol
buttons

An array of buttons.

 array —
  • [items]:
    • Type:string, object, array

      Items should be passed as renderable content (i.e. a string, render array, or included pattern). Passing anything besides a Bolt button is not supported.
Install Install 
  npm install @bolt/components-button-group
Dependencies @bolt/components-button @bolt/components-headline @bolt/core-v3.x

button group

button group icon only

button group quantity variations

1 Button(s)

2 Button(s)

3 Button(s)

4 Button(s)

5 Button(s)