button group docs

Button Group

An inline list of buttons.

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

{% set button_2 %}
  {% include "@bolt-components-button/button.twig" with {
    text: "About Pega",
    style: "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

Html tag to wrap the button group.

 string —
  • ul or ol
buttons

An array of buttons.

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

      A single bolt button, which should be passed as renderable content (i.e. a string, render array, or included pattern). Passing anything besides a bolt button is not supported.
contentItems

An array of bolt objects.

 array —
  • [items]:
    • Type:object

      Bolt component information.
content

A string of content to place in the button group.

 string —
  • —
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)

button group contentItems

This is text with the tags stripped.