Segmented Button Component

A segmented button component.

Properties

Name	Type	Default	Description
selected	boolean	false	Indicates whether the button is selected.
disabled	boolean	false	Indicates whether the button is disabled.

Slots

Name	Description
default	segmented button content

CSS Parts

Name	Description
button	The main container for the button.

Check this link to learn how to use CSS parts for Segmented Button Component.

CSS Properties

Token	Default	Description
--tap-font-family	--tap-sys-font-family	The font family used in the button.
--tap-segmented-button-border-radius	--tap-sys-radius-full	The border radius of the button.
--tap-segmented-button-color	--tap-sys-color-content-primary	The text color of the button.
--tap-segmented-button-line-height	--tap-sys-typography-label-sm-height	The line height of the button text.
--tap-segmented-button-font-size	--tap-sys-typography-label-sm-size	The font size of the button text.
--tap-segmented-button-font-weight	--tap-sys-typography-label-sm-weight	The font weight of the button text.
--tap-segmented-button-selected-background-color	--tap-sys-color-surface-primary	The background color of the selected button.