IconButtonToggle

Wraps a set of IconButton or IconButtonWithTooltip components in a group and marks as active only one at a time. The IconButton with a value matching the 'activeValue' is set to be in the active state. When one presses on one of the buttons, that button is set to active state, and the callback passed to onChange is called with that value. You can pass a tooltip if you use the IconButtonWithTooltip subcomponent.

Basic Usage

Show editable code example

Any Paragon component or export may be added to the code example.

    () => {
      const [activeValue, setActiveValue] = React.useState('card');
      return (
        <>
        <div className="mr-2 mt-2 mb-2">Current value is: <strong>{activeValue}</strong></div>
        <IconButtonToggle activeValue={activeValue} onChange={ value => setActiveValue(value) }>
          <IconButton value="card" src={GridView} iconAs={Icon} alt="Card" />
          <IconButton value="list" src={ListView} iconAs={Icon} alt="List" />
        </IconButtonToggle>
        </>
      );
    }

    () => {
      const [activeValue, setActiveValue] = React.useState('card');
      return (
        <>
        <div className="mr-2 mt-2 mb-2">Current value is: <strong>{activeValue}</strong></div>
        <IconButtonToggle activeValue={activeValue} onChange={ value => setActiveValue(value) }>
          <IconButton value="card" src={GridView} iconAs={Icon} alt="Card" />
          <IconButton value="list" src={ListView} iconAs={Icon} alt="List" />
        </IconButtonToggle>
        </>
      );
    }

Basic Usage (with tooltips)

Show editable code example

Any Paragon component or export may be added to the code example.

    () => {
      const [activeValue, setActiveValue] = React.useState('card');
      return (
        <>
        <div className="mr-2 mt-2 mb-2">Current value is: <strong>{activeValue}</strong></div>
        <IconButtonToggle activeValue={activeValue} onChange={ value => setActiveValue(value) }>
          <IconButtonWithTooltip tooltipContent="Card view" value="card" src={GridView} iconAs={Icon} alt="Card" />
          <IconButtonWithTooltip tooltipContent="List view" value="list" src={ListView} iconAs={Icon} alt="List" />
        </IconButtonToggle>
        </>
      );
    }

    () => {
      const [activeValue, setActiveValue] = React.useState('card');
      return (
        <>
        <div className="mr-2 mt-2 mb-2">Current value is: <strong>{activeValue}</strong></div>
        <IconButtonToggle activeValue={activeValue} onChange={ value => setActiveValue(value) }>
          <IconButtonWithTooltip tooltipContent="Card view" value="card" src={GridView} iconAs={Icon} alt="Card" />
          <IconButtonWithTooltip tooltipContent="List view" value="list" src={ListView} iconAs={Icon} alt="List" />
        </IconButtonToggle>
        </>
      );
    }

Props API#

IconButtonToggle Props API

activeValue string
value to use to check which button to set to active
onChange func
handler that is passed the currently active button's value when a button is selected
Default() => {}
children node Required
child nodes of type IconButton (or its subcomponents) to be rendered within toggle group

Paragon Design System

Theme

PlaygroundBeta

IconButtonToggle

Basic Usage

Basic Usage (with tooltips)

Props API#

All components (A-Z)

Theme

PlaygroundBeta

IconButtonToggle

Basic Usage#

Basic Usage (with tooltips)#

Props API#

All components (A-Z)

Basic Usage

Basic Usage (with tooltips)