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>
  );
}

"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>
  );
}

"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>
  );
}

"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>
  );
}

"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>
  );
}