ButtonGroup component for Stripe Apps
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
| Property | Type |
|---|---|
| Required
One or more |
| Optional
Controls whether or not |
| Optional
Controls which axis the |
| Optional
Allows overriding the trigger element used for an overflow menu. Must be a component that supports press events. |
Overflow collapsing
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.
<Box css={{width: 'fill'}}> <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> </Box>
Disabling collapse behavior
If you want to turn off collapsing behavior, you can specify the collapse="none" prop value.
<Box css={{width: 'fill'}}> <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> </Box>
Customizing the overflow menu trigger
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.
<Box css={{width: 'fill'}}> <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> </Box>