Segmented buttons
Container for a group of related buttons
Demo
API
Tag
| Name | Description |
<s-segmented-buttons>
|
Custom Element that groups button elements together |
Children
The segmented button accepts <button> elements as children. The first and last buttons will have rounded corners, while middle buttons will have no border radius. Buttons should use the secondary class.
Use this component for related but independent actions (e.g. "Save" and "Save as", or "Import" and "Export"). Each button is its own tab stop and has standard button semantics. For a compact single-select control that switches between views of the same content, use <s-radiogroup> instead.
Demo
Tag
| Name |
<SSegmentedButtons>
|
Children
The segmented button accepts <button> elements as children. The first and last buttons will have rounded corners, while middle buttons will have no border radius. Buttons should use the secondary class.
Use this component for related but independent actions. For a compact single-select view toggle, use <SRadiogroup> instead.
Skylab React links
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com