Segmented Button Group Component
A group of segmented buttons.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'md' | The size of the segmented button group. |
Slots
| Name | Description |
|---|---|
default | segmented button group contents, you should use some tap-segmented-button components here |
CSS Parts
| Name | Description |
|---|---|
button-group | The main container for the button group. |
Check this link to learn how to use CSS parts for Segmented Button Group Component.
CSS Properties
| Token | Default | Description |
|---|---|---|
--tap-segmented-button-group-color-surface | --tap-sys-color-surface-secondary | The background color of the button group. |
--tap-segmented-button-group-border-radius | --tap-sys-radius-full | The border radius of the button group. |
--tap-segmented-button-group-padding | --tap-sys-spacing-3 | The padding inside the button group. |
--tap-segmented-button-group-sm-height | --tap-sys-spacing-10 | The height of the small size button group. |
--tap-segmented-button-group-md-height | --tap-sys-spacing-11 | The height of the medium size button group. |
Events
| Name | Description |
|---|---|
segmented-button-group-change | Fires when the button group is changed |