Default

The default toggle comonent:

() => (
    <Toggle defaultValue="Yaml">
        <ToggleItem text="Yaml" />
        <ToggleItem text="Diff" />
    </Toggle>
);

() => (
    <Toggle defaultValue="Yaml">
        <ToggleItem text="Yaml" />
        <ToggleItem text="Diff" />
    </Toggle>
);

The toggle component can be used to toggle between multiple items:

() => {
  const [ value, setValue ] = useState("Yaml");
  return (
    <Toggle value={value} onValueChange={(value) => setValue(value)}>
        <ToggleItem text="Yaml" />
        <ToggleItem text="Json" />
        <ToggleItem text="Xml" />
    </Toggle>
  );
};

() => {
  const [ value, setValue ] = useState("Yaml");
  return (
    <Toggle value={value} onValueChange={(value) => setValue(value)}>
        <ToggleItem text="Yaml" />
        <ToggleItem text="Json" />
        <ToggleItem text="Xml" />
    </Toggle>
  );
};