COMPONENTS

Button Select

Button Select, sometimes called segmented controls, contains a set of two or more buttons that allows a user to select a single choice or multiple choices by clicking on the buttons.

Button select

Button Select can be used as an alternate visual treatment to radio buttons and checkboxes. The user toggles between selected and unselected states when clicking the buttons.

Button select
  1. Selected button
  2. Unselected button
  3. Button Select component

Button Select has two types — single and multiple. Single Button Select behaves similar to a radio button group and only one option can be selected. Multiple Button Select behaves similar to a checkbox group and multiple options can be selected.

Button select

Button Select has three action types available — primary, info and contrast.

Button select action type

Note: Action type property is not yet available in GS UI Toolkit. Only the primary style is available by default. We are working towards including in a future release.

Button Select has three emphasis types available for each of the three action types — bold, subtle and minimal. One action type and one emphasis should be chosen per poduct or application, especially when being used on the same page or in the same section in order to set user expectations for which color indicates selected.

Button select emphasis

Note: Emphasis property is not yet available in GS UI Toolkit. Only the primary style is available by default. We are working towards including in a future release.

Button Select can be displayed in small, medium and large sizes.

Button select

By default, the width of a button is be defined by the length of the text. However, Button Select can be set to a custom width to allow all the buttons in the group to be the same size regardless of text length.

Button select