ComponentsLumos 0.0.1Open component
ButtonWrapper
The row a set of buttons sits in: wrapping, aligned, and spaced from what came before.
Buttons almost never appear alone, and the space above a pair of them is a design decision rather than an accident. ButtonWrapper is that row: it wraps on narrow screens, follows the alignment of whatever it sits in, and puts a consistent gap above itself.
<ButtonWrapper>
<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="link" element="link" href="#">Link</Button>
</ButtonWrapper>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
render | boolean | true | Set to false to skip this component and everything inside it. |
marginTop | "default" | "0"–"8" | "auto" | "default" | Space above the row. default keeps the built-in margin; auto pushes the row to the bottom of a flex column, which is how card buttons line up across a row of cards. |
Inside a card
A ButtonWrapper that is the last thing in a card sits on the card's floor automatically, however tall the cards beside it grow. You do not need to set marginTop="auto" yourself. The framework does it for that case.
Alignment
The row reads the alignment of its parent, so align="center" on a Section centres the buttons too. To set it on the wrapper alone, use an alignment-* utility.
<ButtonWrapper class="alignment-center">