Skip to content

react.mdx

Latest commit

 

History

History
83 lines (64 loc) · 2.46 KB

react.mdx

File metadata and controls

83 lines (64 loc) · 2.46 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 subtle 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.

<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 can be rendered in different sizes in medium and large sizes. The default size is 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