Box
Use boxes to wrap other components and add custom styles and layouts.
To add the Box
component to your app:
import {Box} from '@stripe/ui-extension-sdk/ui';
Boxes are block-level elements, equivalent to a div
HTML element. They support custom styles. If you want to render or style inline elements, see the Inline component.
<Box css={{ padding: 'xxlarge', color: 'secondary', background: 'container', borderRadius: 'small', }} > This is a box. </Box>
Nesting boxes
For some components, you can use a Box to manage the layout and spacing of their children. For example, nest a Box inside an AccordionItem to add padding:
<Accordion> <AccordionItem title="Apples"> <Box css={{padding: 'xlarge'}}>Accordion contents</Box> </AccordionItem> <AccordionItem title="Bananas"> <Box css={{padding: 'xlarge'}}>Accordion contents</Box> </AccordionItem> <AccordionItem title="Peaches" subtitle="A subtitle can be provided"> <Box css={{padding: 'xlarge'}}>Accordion contents</Box> </AccordionItem> </Accordion>
Or nest a Box inside a Button to organize the layout of a label and icon:
<Button> <Icon name="mobile" size="xsmall" /> <Inline>New messages</Inline> </Button> <Badge type="positive"> <Icon name="mobile" size="xsmall" /> New messages </Badge>