css

Description

Optional. Adds a custom style to a Segmented button

Usage

css?: string;

Example

import { useState } from "react";

const optionsText = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
  { value: "three", label: "Three" }
];

function Demo() {
  const [value, setValue] = useState<string | undefined>(undefined);

  return (
    <div className="demo-box">
      <Segmented
        css="my"
        options={optionsText}
        value={value}
        onChange={e => setValue(e.value)}
      />
    </div>
  );
}

/* styling segments of the control */
.demo-box div.my button {
  background-color: gold;
}

/* styling the selected segment */
.demo-box div.my button.selected {
  background-color: green;
}

Details

You can stylize the segments of the button and change the look of the selected segment as well.

Related article: Styling a Segmented button