Skip to main content

options

Description​

Optional. Specifies a set of options to be used as segments of the control

Usage​

options?: {
  id: string | number;
  label: string;
  icon?: string;
  title?: string;
  tooltip?: string;
}[];

Parameters​

An object of the options array may have the following properties:

  • id - (required) an id of an option
  • label - (required) the text content of a button segment (does not set the native tooltip)
  • icon - the name of the icon to be used in a button segment
  • title - the native browser tooltip text shown on hover (sets the HTML title attribute)
  • tooltip - sets data-tooltip-text on the option's <button>; works with a parent <Tooltip> component
note

The tooltip is independent of the title prop. Both can be set simultaneously when each displays its own tooltip (the browser's native one and the SVAR one) but make sure it's not redundant in your case.

Example​

const options = [
  { id: 1, label: "One", icon: "wxi-view-sequential", title: "Grid mode" },
  { id: 2, label: "Two", icon: "wxi-view-grid", title: "Tiles mode" },
  { id: 3, label: "Three", icon: "wxi-view-column", title: "Two panels mode" }
];

function Example() {
  const [value, setValue] = useState<number>(1);

  // Segmented is used as a controlled component in React:
  // - pass options via the `options` prop
  // - control selection via `value` and update it via `onChange`
  return <Segmented options={options} value={value} onChange={setValue} />;
}

Related article: Setting the content of segments

Related sample: Segmented Button