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>

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.