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

    () => {
      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)

    () => {
      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>
        </>
      );
    }

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

IconButtonToggle

Basic Usage

Basic Usage (with tooltips)

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

IconButtonToggle

Basic Usage#

Basic Usage (with tooltips)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage

Basic Usage (with tooltips)