2.20.1

Button Group

Button Group Component in Bolt

Button-group can contain multiple buttons. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-button-group

Description

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.

Dos

Don'ts

NOTE: We currently do not have joined buttons (eg, no gap, single button with two sides), but this is something to consider moving forward.

  {% 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
  ]
} %}

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
Debug Panel