G
Tokens
TypographySpacingColorRadiusShadowMotion
Foundational
FieldMenuTextbox

IconToggle

With icon


    <Arrange gap="xl">
      <IconToggleGroup>
        <IconToggle icon={<IconPlus />} isActive/>
        <IconToggle icon={<IconSwitch />}/>
        <IconToggle icon={<IconHeart />}/>
      </IconToggleGroup>
      <IconToggleGroup>
        <IconToggle icon={<IconPlus />}/>
        <IconToggle icon={<IconHeart />} isActive/>
      </IconToggleGroup>
    </Arrange>
  

With text


    <Arrange gap="xl">
      <IconToggleGroup>
        <IconToggle></IconToggle>
        <IconToggle isActive>Aa</IconToggle>
        <IconToggle>AA</IconToggle>
        <IconToggle>aa</IconToggle>
      </IconToggleGroup>
      <IconToggleGroup>
        <IconToggle isActive>S</IconToggle>
        <IconToggle>M</IconToggle>
        <IconToggle>L</IconToggle>
      </IconToggleGroup>
    </Arrange>
  

Examples

With state


    () => {
      const [activeAlignment, setActiveAlignment] = useState('left');
      const [activeSize, setActiveSize] = useState('m');
      return (
        <Stack gap="m">
          <IconToggleGroup>
            <IconToggle
              icon={<IconTextAlignLeft />}
              onClick={() => setActiveAlignment('left')}
              isActive={activeAlignment === 'left'}
            />
            <IconToggle
              icon={<IconTextAlignCenter />}
              onClick={() => setActiveAlignment('center')}
              isActive={activeAlignment === 'center'}
            />
            <IconToggle
              icon={<IconTextAlignRight />}
              onClick={() => setActiveAlignment('right')}
              isActive={activeAlignment === 'right'}
            />
          </IconToggleGroup>
          
          <IconToggleGroup>
            <IconToggle
              onClick={() => setActiveSize('s')}
              isActive={activeSize === 's'}
            >
              S
            </IconToggle>
            <IconToggle
              onClick={() => setActiveSize('m')}
              isActive={activeSize === 'm'}
            >
              M
            </IconToggle>
            <IconToggle
              onClick={() => setActiveSize('l')}
              isActive={activeSize === 'l'}
            >
              L
            </IconToggle>
          </IconToggleGroup>
        </Stack>
      )
    }
  

Props

IconToggleGroup

Name
Type
Default
children
node

IconToggle

Name
Type
Default
children
node
icon
node
isActive
bool
onClick
func