Segmented Button
Segmented buttons can be used to represent a group of choices like a Radio in a more condensed fashion.
Simple Example
Create a segmented button using the SegmentedButton
and
SegmentedButtonContainer
components. The SegmentedButton
is a controlled
component requiring the selected
state and onClick
props.
"use client";
import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
import { type ReactElement, useState } from "react";
export default function SimpleSegmentedButtonGroupExample(): ReactElement {
const [value, setValue] = useState("a");
return (
<SegmentedButtonContainer>
<SegmentedButton
onClick={() => {
setValue("a");
}}
selected={value === "a"}
>
First
</SegmentedButton>
<SegmentedButton
onClick={() => {
setValue("b");
}}
selected={value === "b"}
>
Second
</SegmentedButton>
<SegmentedButton
onClick={() => {
setValue("c");
}}
selected={value === "c"}
>
Third
</SegmentedButton>
</SegmentedButtonContainer>
);
}
Disable Full Width
The SegmentedButtonContainer
defaults to using width: 100%
to make styling
easier in other flex or grid containers but can be rendered inline by enabling
disableFullWidth
.
"use client";
import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
import { type ReactElement, useState } from "react";
export default function DisableFullWidthExample(): ReactElement {
const [value, setValue] = useState("a");
return (
<SegmentedButtonContainer disableFullWidth>
<SegmentedButton
onClick={() => {
setValue("a");
}}
selected={value === "a"}
>
First
</SegmentedButton>
<SegmentedButton
onClick={() => {
setValue("b");
}}
selected={value === "b"}
>
Second
</SegmentedButton>
</SegmentedButtonContainer>
);
}
Selected Icon
The currently selected button will gain a selected icon by default. This can be
removed by enabling the disableSelectedIcon
prop or setting ``
"use client";
import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement, useState } from "react";
export default function SelectedIconExample(): ReactElement {
const [value, setValue] = useState("a");
return (
<SegmentedButtonContainer disableFullWidth>
<SegmentedButton
onClick={() => {
setValue("a");
}}
selected={value === "a"}
selectedIcon={<FavoriteIcon />}
>
Custom Icon
</SegmentedButton>
<SegmentedButton
onClick={() => {
setValue("b");
}}
selected={value === "b"}
selectedIcon={null}
>
Null Icon
</SegmentedButton>
<SegmentedButton
onClick={() => {
setValue("c");
}}
selected={value === "c"}
disableSelectedIcon
>
Disabled Icon
</SegmentedButton>
</SegmentedButtonContainer>
);
}
Disable Selected Icon Transition
The default behavior for is to use the
useMaxWidthTransition for the selected icon
but can be disabled by enabling disableSelectedTransition
. It is recommended
to enable this prop if the buttons would change width if the selected icon
appears.
"use client";
import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
import { type ReactElement, useState } from "react";
export default function DisableSelectedIconTransitionExample(): ReactElement {
const [value, setValue] = useState("a");
return (
<SegmentedButtonContainer disableFullWidth>
<SegmentedButton
onClick={() => {
setValue("a");
}}
selected={value === "a"}
disableSelectedTransition
>
First
</SegmentedButton>
<SegmentedButton
onClick={() => {
setValue("b");
}}
selected={value === "b"}
disableSelectedTransition
>
Second
</SegmentedButton>
</SegmentedButtonContainer>
);
}