Skip Navigation
React Magma

Toggle Button Group

The Toggle Button Group is a container for multiple Toggle Buttons and enables controlled behaviors throughout the grouping.

Basic Usage

The Toggle Button Group enables styling and selection states across a group of ToggleButtons.

import React from 'react';


import { ToggleButton, ToggleButtonGroup } from 'react-magma-dom';
import {
  FormatAlignCenterIcon,
  FormatAlignJustifyIcon,
  FormatAlignLeftIcon,
  FormatAlignRightIcon,
} from 'react-magma-icons';


export function Example() {
  return (
    <ToggleButtonGroup>
      <ToggleButton
        aria-label="Left align"
        icon={<FormatAlignLeftIcon />}
        value="left"
      />
      <ToggleButton
        aria-label="Center align"
        icon={<FormatAlignCenterIcon />}
        value="center"
      />
      <ToggleButton
        aria-label="Right align"
        icon={<FormatAlignRightIcon />}
        value="right"
      />
      <ToggleButton
        aria-label="Justify align"
        icon={<FormatAlignJustifyIcon />}
        value="justify"
      />
    </ToggleButtonGroup>
  );
}

Defined Selection

Using the same value between ToggleButtonGroup and ToggleButton allows a user to define preselected buttons.

import React from 'react';


import { ToggleButton, ToggleButtonGroup } from 'react-magma-dom';
import {
  FormatAlignCenterIcon,
  FormatAlignJustifyIcon,
  FormatAlignLeftIcon,
  FormatAlignRightIcon,
} from 'react-magma-icons';


export function Example() {
  return (
    <ToggleButtonGroup value="center">
      <ToggleButton
        aria-label="Left align"
        icon={<FormatAlignLeftIcon />}
        value="left"
      />
      <ToggleButton
        aria-label="Center align"
        icon={<FormatAlignCenterIcon />}
        value="center"
      />
      <ToggleButton
        aria-label="Right align"
        icon={<FormatAlignRightIcon />}
        value="right"
      />
      <ToggleButton
        aria-label="Justify align"
        icon={<FormatAlignJustifyIcon />}
        value="justify"
      />
    </ToggleButtonGroup>
  );
}

Exclusive Selection

When exclusive is enabled, it ensures a radio style ToggleButtonGroup has at least one selected state.

import React from 'react';


import { ToggleButton, ToggleButtonGroup } from 'react-magma-dom';
import {
  FormatAlignLeftIcon,
  FormatAlignCenterIcon,
  FormatAlignRightIcon,
  FormatAlignJustifyIcon,
} from 'react-magma-icons';


export function Example() {
  return (
    <ToggleButtonGroup noSpace exclusive>
      <ToggleButton
        aria-label="Left align"
        icon={<FormatAlignLeftIcon />}
        value="left"
      />
      <ToggleButton
        aria-label="Center align"
        icon={<FormatAlignCenterIcon />}
        value="center"
      />
      <ToggleButton
        aria-label="Right align"
        icon={<FormatAlignRightIcon />}
        value="right"
      />
      <ToggleButton
        aria-label="Justify align"
        icon={<FormatAlignJustifyIcon />}
        value="justify"
      />
    </ToggleButtonGroup>
  );
}

Enforced Selection

The enforced prop requires that at least one button be selected (after first selection).

The enforced prop in conjunction with exclusive allows just one toggled button across the group like a radio.

import React from 'react';


import { ToggleButton, ToggleButtonGroup, Spacer } from 'react-magma-dom';
import {
  FormatAlignLeftIcon,
  FormatAlignCenterIcon,
  FormatAlignRightIcon,
  FormatAlignJustifyIcon,
} from 'react-magma-icons';


export function Example() {
  return (
    <>
      <ToggleButtonGroup noSpace enforced>
        <ToggleButton
          aria-label="Left align"
          icon={<FormatAlignLeftIcon />}
          value="left"
        />
        <ToggleButton
          aria-label="Center align"
          icon={<FormatAlignCenterIcon />}
          value="center"
        />
        <ToggleButton
          aria-label="Right align"
          icon={<FormatAlignRightIcon />}
          value="right"
        />
        <ToggleButton
          aria-label="Justify align"
          icon={<FormatAlignJustifyIcon />}
          value="justify"
        />
      </ToggleButtonGroup>
      <Spacer size="12" />
      <ToggleButtonGroup noSpace enforced exclusive>
        <ToggleButton
          aria-label="Left align"
          icon={<FormatAlignLeftIcon />}
          value="left"
        />
        <ToggleButton
          aria-label="Center align"
          icon={<FormatAlignCenterIcon />}
          value="center"
        />
        <ToggleButton
          aria-label="Right align"
          icon={<FormatAlignRightIcon />}
          value="right"
        />
        <ToggleButton
          aria-label="Justify align"
          icon={<FormatAlignJustifyIcon />}
          value="justify"
        />
      </ToggleButtonGroup>
    </>
  );
}

No Space

Removes margins and border radius on each button then applies the border-radius around the container.

import React from 'react';


import { ToggleButton, ToggleButtonGroup } from 'react-magma-dom';
import {
  FormatAlignCenterIcon,
  FormatAlignJustifyIcon,
  FormatAlignLeftIcon,
  FormatAlignRightIcon,
} from 'react-magma-icons';


export function Example() {
  return (
    <ToggleButtonGroup noSpace>
      <ToggleButton
        aria-label="Left align"
        icon={<FormatAlignLeftIcon />}
        value="left"
      />
      <ToggleButton
        aria-label="Center align"
        icon={<FormatAlignCenterIcon />}
        value="center"
      />
      <ToggleButton
        aria-label="Right align"
        icon={<FormatAlignRightIcon />}
        value="right"
      />
      <ToggleButton
        aria-label="Justify align"
        icon={<FormatAlignJustifyIcon />}
        value="justify"
      />
    </ToggleButtonGroup>
  );
}

Size

Three sizes are configurable with the ButtonSize prop between small, medium (default), and large across the group.

import React from 'react';


import { ButtonSize, ToggleButton, ToggleButtonGroup } from 'react-magma-dom';


export function Example() {
  return (
    <ToggleButtonGroup size={ButtonSize.small}>
      <ToggleButton value="1">Toggle 1</ToggleButton>
      <ToggleButton value="2">Toggle 2</ToggleButton>
      <ToggleButton value="3" size={ButtonSize.large}>
        Toggle 3
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

Inverse

import React from 'react';


import { Container, ToggleButton, ToggleButtonGroup } from 'react-magma-dom';


export function Example() {
  return (
    <Container isInverse style={{ padding: '12px' }}>
      <ToggleButtonGroup isInverse>
        <ToggleButton value="1">Toggle 1</ToggleButton>
        <ToggleButton value="2">Toggle 2</ToggleButton>
        <ToggleButton value="3">Toggle 3</ToggleButton>
      </ToggleButtonGroup>
    </Container>
  );
}

ToggleButtonGroup Props

Any other props supplied will be provided to the wrapping div element.

alignment

Description

Alignment of the dropdown content

Type

enum, one of:
ButtonGroupAlignment.apart
ButtonGroupAlignment.center
ButtonGroupAlignment.fill
ButtonGroupAlignment.left
ButtonGroupAlignment.right

Default

ButtonGroupAlignment.left

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

color

Description

The color of all the buttons in the group

Type

enum, one of:
ButtonColor.danger
ButtonColor.marketing
ButtonColor.primary
ButtonColor.secondary
ButtonColor.subtle
ButtonColor.success

Default

ButtonColor.primary

descriptionId

Description

Description for aria-describedby

Type

string

Default

-

enforced

Description

Enables a radio configuration throughout the group retaining an active selection at all times.

Type

boolean

Default

false

exclusive

Description

Sets the Toggle Button group to have only one active selection.

Type

boolean

Default

false

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

noSpace

Description

Whether or not the buttons in the group are spaced out

Type

boolean

Default

false

onChange

Description

The onChange handler for managing state of toggle buttons by your custom logic.

Type

function

Default

-

orientation

Description

Determines if the buttons are displayed vertically or horizontally

Type

enum, one of:
ButtonGroupOrientation.horizontal
ButtonGroupOrientation.vertical

Default

ButtonGroupOrientation.horizontal

size

Description

The relative size of all the buttons in the group

Type

enum, one of:
ButtonSize.large
ButtonSize.medium
ButtonSize.small

Default

ButtonSize.medium

textTransform

Description

Determines whether all the buttons in the group appear in all-caps

Type

enum, one of:
ButtonTextTransform.none
ButtonTextTransform.uppercase

Default

ButtonTextTransform.uppercase

value

Description

Value of the toggle button that is the default selected value for the group

Type

string

Default

-

variant

Description

The variant of all the buttons in the group

Type

enum, one of:
ButtonVariant.link
ButtonVariant.solid

Default

ButtonVariant.solid

On this page

Deploys by Netlify