select from multiple related but mutually exclusive options. It is not certain that we should support using this control over radio buttons.
If we find that they should not be used, enhance the radio documentation to include examples that better represent the contexts where split buttons have been used.
Acceptance Criteria:
The segmented buttons should be aligned together, visually indicating that they are part of a single group of options.
Each segment should be easily distinguishable, with the design system's standard fonts, margins, and color scheme.
Only one option within the segmented button can be selected at any given time.
Clicking or tapping on a segment should immediately select it and deselect the previous selection.
The selected segment should have a distinct visual style to indicate its active state (e.g., a different color, border, or shading).
Each segment should provide an accessible text label that clearly describes its function and is readable by screen readers.
The segmented button component should be keyboard-navigable, allowing users to switch between segments using arrow keys.
The component should have a default selected segment as specified by the product requirements.
If the segmented button involves loading or asynchronous operations, a loading state should be displayed.
State persistence should be considered. If the user navigates away and returns, the previously selected segment should remain selected unless otherwise specified.
Figma contribution file
Sask design system has created this component for their design system, follow-up with them to find out the rationale
Description:
select from multiple related but mutually exclusive options. It is not certain that we should support using this control over radio buttons.
If we find that they should not be used, enhance the radio documentation to include examples that better represent the contexts where split buttons have been used.
Acceptance Criteria:
The segmented buttons should be aligned together, visually indicating that they are part of a single group of options.
Each segment should be easily distinguishable, with the design system's standard fonts, margins, and color scheme.
Only one option within the segmented button can be selected at any given time.
Clicking or tapping on a segment should immediately select it and deselect the previous selection.
The selected segment should have a distinct visual style to indicate its active state (e.g., a different color, border, or shading).
Each segment should provide an accessible text label that clearly describes its function and is readable by screen readers.
The segmented button component should be keyboard-navigable, allowing users to switch between segments using arrow keys.
The component should have a default selected segment as specified by the product requirements.
If the segmented button involves loading or asynchronous operations, a loading state should be displayed.
State persistence should be considered. If the user navigates away and returns, the previously selected segment should remain selected unless otherwise specified.
Figma contribution file
Sask design system has created this component for their design system, follow-up with them to find out the rationale
https://www.figma.com/file/1ARgZzW463rFoFgnXg65xi/Component---Split-button?node-id=3%3A404&t=MrKOkP0XpFPKtbu3-1