Skip Navigation
React Magma

ButtonGroup

A ButtonGroup is a layout component for Buttons, Icon Buttons and Dropdown Buttons. It's a helper for aligning 2 or more buttons together with appropriate spacing.

Default

By default, the ButtonGroup will align the buttons horizontally and to the left.

import React from 'react';
import { ButtonGroup, Button, ButtonColor } from 'react-magma-dom';


export function Example() {
  return (
    <ButtonGroup>
      <Button color={ButtonColor.secondary}>Cancel</Button>
      <Button color={ButtonColor.primary}>Save</Button>
    </ButtonGroup>
  );
}

Orientation

The orientation prop can be used to display buttons vertically, instead of horizontally. The orientation prop accepts either horizontal (default) or vertical.

import React from 'react';
import { ButtonGroup, Button, ButtonGroupOrientation } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <ButtonGroup orientation={ButtonGroupOrientation.horizontal}>
        <Button>1</Button>
        <Button>2</Button>
        <Button>3</Button>
      </ButtonGroup>
      <br />
      <br />
      <ButtonGroup orientation={ButtonGroupOrientation.vertical}>
        <Button>4</Button>
        <Button>5</Button>
        <Button>6</Button>
      </ButtonGroup>
    </>
  );
}

Alignment

The alignment prop can be used to display buttons in different positions. The alignment prop accepts: left (default), right, center, apart and fill.

The apart prop should only be used with the horizontal orientation.

import React from 'react';
import {
  ButtonGroup,
  Button,
  ButtonGroupOrientation,
  ButtonGroupAlignment,
  Dropdown,
  DropdownButton,
  DropdownContent,
  DropdownMenuItem,
} from 'react-magma-dom';


export function Example() {
  return (
    <>
      <ButtonGroup
        orientation={ButtonGroupOrientation.horizontal}
        alignment={ButtonGroupAlignment.right}
      >
        <Dropdown>
          <DropdownButton>1</DropdownButton>
          <DropdownContent>
            <DropdownMenuItem>Menu item</DropdownMenuItem>
          </DropdownContent>
        </Dropdown>
        <Button>2</Button>
        <Button>3</Button>
      </ButtonGroup>
      <br />
      <br />
      <ButtonGroup
        orientation={ButtonGroupOrientation.horizontal}
        alignment={ButtonGroupAlignment.center}
      >
        <Dropdown>
          <DropdownButton>1</DropdownButton>
          <DropdownContent>
            <DropdownMenuItem>Menu item</DropdownMenuItem>
          </DropdownContent>
        </Dropdown>
        <Button>2</Button>
        <Button>3</Button>
      </ButtonGroup>
      <br />
      <br />
      <ButtonGroup
        orientation={ButtonGroupOrientation.horizontal}
        alignment={ButtonGroupAlignment.apart}
      >
        <Dropdown>
          <DropdownButton>1</DropdownButton>
          <DropdownContent>
            <DropdownMenuItem>Menu item</DropdownMenuItem>
          </DropdownContent>
        </Dropdown>
        <Button>2</Button>
        <Button>3</Button>
      </ButtonGroup>
      <br />
      <br />
      <ButtonGroup
        orientation={ButtonGroupOrientation.horizontal}
        alignment={ButtonGroupAlignment.fill}
      >
        <Dropdown>
          <DropdownButton>1</DropdownButton>
          <DropdownContent>
            <DropdownMenuItem>Menu item</DropdownMenuItem>
          </DropdownContent>
        </Dropdown>
        <Button>2</Button>
        <Button>3</Button>
      </ButtonGroup>
    </>
  );
}

No Space

The noSpace prop should only be used with the horizontal orientation.

import React from 'react';
import {
  ButtonGroup,
  Button,
  ButtonGroupOrientation,
  ButtonColor,
  Dropdown,
  DropdownButton,
  DropdownContent,
  DropdownMenuItem,
} from 'react-magma-dom';


export function Example() {
  return (
    <>
      <ButtonGroup
        orientation={ButtonGroupOrientation.horizontal}
        noSpace
        color={ButtonColor.secondary}
      >
        <Button>1</Button>
        <Button>2</Button>
        <Button>3</Button>
      </ButtonGroup>
      <br />
      <br />
      <ButtonGroup orientation={ButtonGroupOrientation.horizontal} noSpace>
        <Dropdown>
          <DropdownButton>1</DropdownButton>
          <DropdownContent>
            <DropdownMenuItem>Menu item 1</DropdownMenuItem>
          </DropdownContent>
        </Dropdown>
        <Dropdown>
          <DropdownButton>2</DropdownButton>
          <DropdownContent>
            <DropdownMenuItem>Menu item 2</DropdownMenuItem>
          </DropdownContent>
        </Dropdown>
        <Dropdown>
          <DropdownButton>3</DropdownButton>
          <DropdownContent>
            <DropdownMenuItem>Menu item 3</DropdownMenuItem>
          </DropdownContent>
        </Dropdown>
      </ButtonGroup>
    </>
  );
}

Color, Variant, Size, isInverse

The color, variant and size props can be used on the ButtonGroup to set the default value for all the buttons inside it. If a Button in the group also sets that prop, the one in the Button will be visible.

import React from 'react';
import {
  ButtonGroup,
  Button,
  ButtonColor,
  ButtonVariant,
  ButtonSize,
  Container,
} from 'react-magma-dom';


export function Example() {
  return (
    <Container isInverse style={{ padding: '12px' }}>
      <ButtonGroup
        color={ButtonColor.primary}
        variant={ButtonVariant.solid}
        size={ButtonSize.large}
        isInverse
      >
        <Button>1</Button>
        <Button color={ButtonColor.danger}>2</Button>
        <Button>3</Button>
        <Button>4</Button>
        <Button variant={ButtonVariant.link}>5</Button>
      </ButtonGroup>
    </Container>
  );
}

Small Screen Sizes

This is an example of how to handle changing the orientation of the ButtonGroup for certain Breakpoints.

import React from 'react';
import {
  ButtonGroup,
  Button,
  ButtonGroupOrientation,
  BreakpointsContainer,
  Breakpoint,
  BreakpointScreenSize,
} from 'react-magma-dom';


export function Example() {
  return (
    <BreakpointsContainer>
      <Breakpoint screenSize={BreakpointScreenSize.xs}>
        <ButtonGroup orientation={ButtonGroupOrientation.vertical}>
          <Button>1</Button>
          <Button>2</Button>
          <Button>3</Button>
          <Button>4</Button>
          <Button>5</Button>
        </ButtonGroup>
      </Breakpoint>


      <Breakpoint screenSize={BreakpointScreenSize.small}>
        <ButtonGroup orientation={ButtonGroupOrientation.horizontal}>
          <Button>1</Button>
          <Button>2</Button>
          <Button>3</Button>
          <Button>4</Button>
          <Button>5</Button>
        </ButtonGroup>
      </Breakpoint>
    </BreakpointsContainer>
  );
}

ButtonGroup 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

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

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

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