Skip to content

react.mdx

Latest commit

 

History

History
85 lines (65 loc) · 2.7 KB

react.mdx

File metadata and controls

85 lines (65 loc) · 2.7 KB
Raw
title Button group
description Use the button group component to group related buttons and action menus together.
keywords
buttons
control
action
group
paired
show-tabs true
tab-label React
ready true
source https://github.com/primer/brand/blob/main/packages/react/src/ButtonGroup/ButtonGroup.tsx
storybook /brand/storybook/?path=/story/components-buttongroup--playground

import {ButtonGroupSizesProp, ButtonGroupAsProp} from './react'

import {ActionMenu, Button, ButtonGroup} from '@primer/react-brand'

Examples

Default

This is the default variant for the ButtonGroup component. The first item in the group uses the primary button variant and the second uses the secondary button variant.

<ButtonGroup>
  <Button>This is one button</Button>
  <Button>This is another button</Button>
</ButtonGroup>

Action menus

ButtonGroup supports up to two Button or ActionMenu children and applies a default variant to each one.

Explicit variant overrides to Button or ActionMenu.Button will override the default values.

buttonSize applies to both child types. Because ActionMenu supports only small and medium, it remains medium when buttonSize="large". Set size on ActionMenu to override the inherited size.

<ButtonGroup>
  <Button>Primary action</Button>
  <ActionMenu>
    <ActionMenu.Button>More actions</ActionMenu.Button>
    <ActionMenu.Overlay aria-label="More actions">
      <ActionMenu.Item value="contact-sales">Contact sales</ActionMenu.Item>
      <ActionMenu.Item value="view-pricing">View pricing</ActionMenu.Item>
    </ActionMenu.Overlay>
  </ActionMenu>
</ButtonGroup>

Sizes

The ButtonGroup component supports small, medium, and large buttons. The default size is medium. ActionMenu children support small and medium.

<ButtonGroup buttonSize="large">
  <Button>This is one large button</Button>
  <Button>This is another large button</Button>
</ButtonGroup>

Polymorphism

The Button component can render as a button or a HTML element. By default, it will render as a button.

<ButtonGroup>
  <Button as="a" href="#">
    This is one link
  </Button>
  <Button as="a" href="#">
    This is another link
  </Button>
</ButtonGroup>

Component props

ButtonGroup

Name Type Default Description
buttonSize 'medium' The size variations available in Button
buttonsAs 'button' The HTML variations available in Button