Toggle button

() => {
  const buttons = [
    { label: "Weekly", value: "week" },
    { label: "Monthly", value: "month" },
    { label: "Yearly", value: "year" },
  ]
  const [buttonGroupValue, setButtonGroupValue] = React.useState("month")

  return (
    <ToggleButtonGroup
      label="How frequently would you like to receive promotional emails?"
      value={buttonGroupValue}
      onChange={(event, value) => setButtonGroupValue(value)}
    >
      {buttons.map((button) => (
        <ToggleButton key={button.value} value={button.value}>
          {button.label}
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  )
}

() => {
  const items = [
    "Fruit & vegetables",
    "Meat & fish",
    "Dairy, eggs & juice",
    "Bakery",
  ]
  const buttons = [
    { label: "Grid", value: "grid", icon: GridView },
    { label: "List", value: "list", icon: ListView },
  ]

  const [buttonGroupValue, setButtonGroupValue] = React.useState("list")

  return (
    <div>
      <ToggleButtonGroup
        inline
        label="Results view"
        value={buttonGroupValue}
        onChange={(event, value) => setButtonGroupValue(value)}
      >
        {buttons.map(({ label, value, icon: Icon }) => (
          <ToggleButton key={value} value={value}>
            <Icon className="ln-c-icon--large" />
            <span className="ln-u-visually-hidden">{label}</span>
          </ToggleButton>
        ))}
      </ToggleButtonGroup>
      <GridWrapper matrix equalHeight gutterSize="sm" className="ln-u-push-top">
        {items.map((item) => (
          <GridItem key={item} size={buttonGroupValue === "grid" ? "1/2" : "1"}>
            <Card className="ln-u-display-2">{item}</Card>
          </GridItem>
        ))}
      </GridWrapper>
    </div>
  )
}

() => {
  const buttons = [
    { label: "Like", value: "like", icon: Like },
    { label: "Dislike", value: "dislike", icon: Dislike },
  ]

  const [buttonGroupValue, setButtonGroupValue] = React.useState()

  return (
    <ToggleButtonGroup
      inline
      alpha
      label="Like / dislike"
      value={buttonGroupValue}
      onChange={(event, value) =>
        setButtonGroupValue(buttonGroupValue !== value ? value : undefined)
      }
    >
      {buttons.map(({ label, value, icon: Icon }) => (
        <ToggleButton key={value} value={value}>
          <Icon className="ln-u-margin-right" />
          {label}
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  )
}