ButtonBar

import {Fragment, useState} from 'react';

import {Button, ButtonBar} from '@sentry/scraps/button';

import * as Storybook from 'sentry/stories';

export const documentation = import('!!type-loader!@sentry/scraps/button').then( module => { const buttonDocumentation = module.default; return { props: { ButtonBar: buttonDocumentation.props?.ButtonBar, }, exports: { module: buttonDocumentation.exports?.module, exports: { ...Object.fromEntries( Object.entries(buttonDocumentation?.exports?.exports ?? {}).filter( ([key]) => key === 'ButtonBar' ) ), }, }, }; } );

ButtonBar is used to create merged button groups where buttons are visually joined together with shared borders and no gaps between them, creating a cohesive pill-like control unit.

Usage

<Storybook.Demo> <ButtonBar> <Button>One</Button> <Button>Two</Button> <Button>Three</Button> </ButtonBar> </Storybook.Demo>

<ButtonBar>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonBar>

Orientation

Use orientation="vertical" to stack buttons vertically with joined borders.

<Storybook.Demo> <ButtonBar orientation="vertical"> <Button>One</Button> <Button>Two</Button> <Button>Three</Button> </ButtonBar> </Storybook.Demo>

<ButtonBar orientation="vertical">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonBar>

Size

Use size to set a uniform size for all buttons in the bar. This sets a SizeContext so child buttons inherit the size automatically.

<Storybook.Demo> <ButtonBar size="xs"> <Button>One</Button> <Button>Two</Button> <Button>Three</Button> </ButtonBar> </Storybook.Demo>

<ButtonBar size="xs">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonBar>

Notes

ButtonBar is a simple presentational component that handles only the visual layout of buttons. It does not manage any internal state such as which button is active or selected. If you need to track an active button or manage selection state, you should handle that in your parent component and pass the appropriate props (like variant="primary") to the active button.