Segmented Control

Segmented control are used to switch between alternative views of similar or related content.

On this page

Import

Primary With Icons

Loading preview
Open in Storybook

Secondary With Icons

Loading preview
Open in Storybook

Primary Without Icons

Loading preview
Open in Storybook

Secondary Without Icons

Loading preview
Open in Storybook

Props

Segmented Control Props

NameDescriptionDefault
label

Text that's used as the visual and accessible label for the component. If not provided, hide the component's built-in label.

string		-
aria-labelledby

The id of a label, which provides an accessible name for the component Identifies the element (or elements) that labels the current element. @see aria-describedby.

string		-
selected

The 'id' value of the SegmentedButton that is currently selected (controlled component)

string		-
defaultSelected

The 'id' value of the SegmentedButton that should be selected on first mount (uncontrolled component)

string		-
id*

ID used for accessible labeling

string		-
children

Children to render as the text for the legend.

NonNullable<ReactNode>		-
onSelectionChange

The event handler for click events on button, disabled for disabled buttons

((event: MouseEvent<HTMLButtonElement, MouseEvent>, selectedId: string) => void)		-
hint

Additional information for the select

string		-
isHintVisuallyHidden

If true, visually hides the hint text (it will still be accessible to screen readers)

boolean		-
variant

Determines the style of the selected button in the SegmentedControl. Defaults to 'primary' if not specified.

"primary" | "secondary"		-
iconPosition

Determines where to position the icon within the SegmentedButton. Defaults to 'start' if not specified.

"start" | "end"		start
ref
((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null		-
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-

Segmented Button Props

NameDescriptionDefault
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-
ref
((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null		-
children

Contents of button body

ReactNode		-
onClick

The event handler for click events on button, disabled for disabled buttons

MouseEventHandler<HTMLButtonElement>		-
isLoading

If true, shows loading button with spinner

boolean		-
variant

Determines style of button

"primary" | "secondary" | "tertiary"		-
iconPosition

Place icon before or after text

"start" | "end"		-
icon

Custom icon displayed in notification

ReactNode		-
reactlytics
ReactlyticsProp		-
labelOverrides

Overrides for labels that have been defaulted in the component.

ButtonLabelOverrides		-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.