ButtonGroup
Use ButtonGroup to handle the layout for multiple buttons and collapse them into an overflow menu when space is limited.
To add the ButtonGroup
component to your app:
import {ButtonGroup} from '@stripe/ui-extension-sdk/ui';
<ButtonGroup> <Button onPress={() => { console.log('Filter'); }} > Filter </Button> <Button onPress={() => { console.log('Export'); }} > Export </Button> <Button type="primary" onPress={() => { console.log('Save'); }} > Save </Button> </ButtonGroup>
ButtonGroup props![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Property | Type |
---|---|
| Required
One or more Button components. |
| Optional
Controls whether or not buttons within the group collapse when there isn’t enough space to display them without overflowing. |
| Optional
Controls which axis the button group should span. |
| Optional
Allows overriding the trigger element used for an overflow menu. Must be a component that supports press events. |
Overflow collapsing ![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Button groups responsively adapt to the space available in their container by collapsing buttons into an overflow menu. Primary buttons collapse after any other buttons, and larger buttons collapse first.
<ButtonGroup> <Button onPress={() => { console.log('Filter'); }} > Filter </Button> <Button onPress={() => { console.log('Export'); }} > Export </Button> <Button type="primary" onPress={() => { console.log('Save'); }} > Save </Button> </ButtonGroup>
Disabling collapse behavior![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
If you want to turn off collapsing behavior, you can specify the collapse="none"
prop value.
<ButtonGroup collapse="none"> <Button onPress={() => { console.log('Filter'); }} > Filter </Button> <Button onPress={() => { console.log('Export'); }} > Export </Button> <Button type="primary" onPress={() => { console.log('Save'); }} > Save </Button> </ButtonGroup>
Customizing the overflow menu trigger ![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
You can replace the default overflow menu trigger with any element that supports onPress
events. To adhere to best practices, remember to add an appropriate aria-label
to your trigger element if it doesn’t contain descriptive text.
<ButtonGroup menuTrigger={ <Button>More actions</Button> } > <Button onPress={() => { console.log('Filter'); }} > Filter </Button> <Button onPress={() => { console.log('Export'); }} > Export </Button> <Button type="primary" onPress={() => { console.log('Save'); }} > Save </Button> </ButtonGroup>