Button group / Select button

Usage

Button group or select button is a collection of buttons that can be selected as a single selection or multiple selections. Button group displays multiple related actions in a horizontal row to help with arrangement and spacing. It can be used in cases where the user wants to control or filter the visibility of the information displayed. It may be used to provide more data facets on table layouts.

Button group or select button can be set to justified alignment to span across the full width of it’s container, or it can be set to align the width based on the button text label.

Best Practices

• Group together the actions that have a relationship (like displaying data aggregations or switching between data types)

• Be thoughtful about how button group will look and work on small screens; having up to 8 items is acceptable, but also depends on the length of the button text labels

• Avoid stacking buttons on top of each other or overflowing into more than one row

States

• Buttons follow the same state styling principles across filled or outlined types.

• Enabled border colour is Grey Base 1px; copy colour is Grey Base

• Hover background colour is Blue Base; copy colour is White Base

• Focus shadow is 2px Purple L50

• Disabled border colour is Grey L50 1px; copy colour is Grey L50

• Selected background colour is Blue L90; border colour, Blue Base; copy colour is Blue Base

• Font is Open sans 16px / 22px (Font size / Line height)