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;
}[];

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 tooltip text that will appear on hovering the mouse cursor over a button segment

Example

<script>
  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" }
  ];
</script>

<Segmented {options} value={1} />

Related article: Setting the content of segments

Related sample: Segmented Button