lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

The button group component is used to group together related buttons and present them as a single visual unit. Each button in the group should have a clear and descriptive label that communicates its purpose. The group should be labeled if the relationship between the buttons is not immediately clear.

Example

onetwothree
code
<script type="module">
  import '@blueprintui/components/include/button-group.js';
  import '@blueprintui/components/include/button.js';
</script>

<bp-button-group>
  <bp-button>one</bp-button>
  <bp-button selected>two</bp-button>
  <bp-button>three</bp-button>
</bp-button-group>

Secondary

onetwothree
code
<script type="module">
  import '@blueprintui/components/include/button-group.js';
  import '@blueprintui/components/include/button.js';
</script>

<bp-button-group action="secondary">
  <bp-button>one</bp-button>
  <bp-button selected>two</bp-button>
  <bp-button>three</bp-button>
</bp-button-group>

Flat

onetwothree
code
<script type="module">
  import '@blueprintui/components/include/button-group.js';
  import '@blueprintui/components/include/button.js';
</script>

<bp-button-group action="flat">
  <bp-button>one</bp-button>
  <bp-button selected>two</bp-button>
  <bp-button>three</bp-button>
</bp-button-group>

Icon

code
<script type="module">
  import '@blueprintui/components/include/button-group.js';
  import '@blueprintui/components/include/button.js';
</script>

<bp-button-group>
  <bp-button-icon shape="font-size" aria-label="font size"></bp-button-icon>
  <bp-button-icon selected shape="italic" aria-label="italic"></bp-button-icon>
  <bp-button-icon shape="number-list" aria-label="number list"></bp-button-icon>
  <bp-button-icon shape="highlighter" aria-label="highlighter"></bp-button-icon>
  <bp-button-icon shape="attachment" aria-label="attachment"></bp-button-icon>
</bp-button-group>

Icon Secondary

code
<bp-button-group action="secondary">
  <bp-button-icon shape="font-size" aria-label="font size"></bp-button-icon>
  <bp-button-icon selected shape="italic" aria-label="italic"></bp-button-icon>
  <bp-button-icon shape="number-list" aria-label="number list"></bp-button-icon>
  <bp-button-icon shape="highlighter" aria-label="highlighter"></bp-button-icon>
  <bp-button-icon shape="attachment" aria-label="attachment"></bp-button-icon>
</bp-button-group>

Icon Flat

code
<bp-button-group action="flat">
  <bp-button-icon shape="font-size" aria-label="font size"></bp-button-icon>
  <bp-button-icon selected shape="italic" aria-label="italic"></bp-button-icon>
  <bp-button-icon shape="number-list" aria-label="number list"></bp-button-icon>
  <bp-button-icon shape="highlighter" aria-label="highlighter"></bp-button-icon>
  <bp-button-icon shape="attachment" aria-label="attachment"></bp-button-icon>
</bp-button-group>

Selected

button onebutton twobutton three
code
<script type="module">
  import '@blueprintui/components/include/button-group.js';
  import '@blueprintui/components/include/button.js';
</script>

<bp-button-group>
  <bp-button>button one</bp-button>
  <bp-button selected>button two</bp-button>
  <bp-button>button three</bp-button>
</bp-button-group>

The selected attribute is used to indicate the current selected item within a group of items. It assists screen readers by conveying which item is currently selected, enhancing accessibility.

Disabled

button onebutton twobutton three
code
<script type="module">
  import '@blueprintui/components/include/button-group.js';
  import '@blueprintui/components/include/button.js';
</script>

<bp-button-group>
  <bp-button>button one</bp-button>
  <bp-button>button two</bp-button>
  <bp-button disabled>button three</bp-button>
</bp-button-group>

The disabled attribute should be used for UI elements that are currently disabled, making them uninteractive. This attribute informs assistive technologies like screen readers that the element, while present in the document structure, is not usable or cannot be interacted with in its current state.

Install

NPM

// npm package
import '@blueprintui/components/include/button-group.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/button-group.js/+esm';
</script>

Accessibility

  • Use clear, descriptive labels for each button that communicates its purpose.
  • Use aria-label or aria-labelledby to label the group if the relationship between the buttons is not immediately clear.
  • Provide a way for keyboard users to navigate through the buttons, such as by using the tab key.

bp-button-group

Properties

NameTypesDescription
accessor
action'primary' | 'secondary' | 'flat'

Attributes

NameTypesDescription
accessor

Slots

NameTypesDescription
defaultbutton content

bp-button

Properties

NameTypesDescription
accessordetermine the visual status state
action'primary' | 'secondary' | 'flat' | 'inline'
status'accent' | 'success' | 'warning' | 'danger'
pressedboolean
selectedboolean
expandedboolean
readonlyboolean
disabledboolean
type'button' | 'submit'
namestringrepresents the name of the current
element as a string.
valuestring
popoverTargetElementHTMLElement
popoverTargetAction| 'toggle' | 'show' | 'hide'
popovertargetstring
formHTMLFormElement
formActionstring
formEnctypestring
formMethodstring
formNoValidateboolean
formTargetstring
labelsNodeListOf
validationMessagestring
validityValidityState
willValidateboolean
checkValidityany
reportValidityany
setCustomValidityany
formAssociatedboolean

Attributes

NameTypesDescription
accessordetermine the visual status state
popovertargetactiondetermines the current value
popovertargetdetermines the current value

CSS Properties

NameTypesDescription
--background
--color
--border
--padding
--min-width
--font-size
--line-height
--text-align

Slots

NameTypesDescription
defaultbutton content