TextToggle

    <TextToggleGroup>
      <TextToggle isActive>{demoFilms[11]}</TextToggle>
      <TextToggle>{demoFilms[13]}</TextToggle>
      <TextToggle>{demoFilms[14]}</TextToggle>
    </TextToggleGroup>
  

    <TextToggleGroup hasFullWidth>
      <TextToggle isActive>{demoFilms[11]}</TextToggle>
      <TextToggle>{demoFilms[13]}</TextToggle>
      <TextToggle>{demoFilms[14]}</TextToggle>
    </TextToggleGroup>
  

    <TextToggleGroup>
      <TextToggle isDisabled isActive>{demoFilms[15]}</TextToggle>
      <TextToggle isDisabled>{demoFilms[17]}</TextToggle>
      <TextToggle isDisabled>{demoFilms[19]}</TextToggle>
    </TextToggleGroup>
  

    () => {
      const [activeOption, setActiveOption] = useState(demoFilms[27]);
      return (
        <TextToggleGroup>
          <TextToggle
            onClick={() => setActiveOption(demoFilms[27])}
            isActive={activeOption === demoFilms[27]}
          >
            {demoFilms[27]}
          </TextToggle>
          <TextToggle
            onClick={() => setActiveOption(demoFilms[20])}
            isActive={activeOption === demoFilms[20]}
          >
            {demoFilms[20]}
          </TextToggle>
          <TextToggle
            onClick={() => setActiveOption(demoFilms[17])}
            isActive={activeOption === demoFilms[17]}
          >
            {demoFilms[17]}
          </TextToggle>
        </TextToggleGroup>
      )
    }