BRAID
Braid Logo
 

Actions

Open in Playroom
The Actions component standardises the responsive layout and spacing for groups of Button components.

Alternatives

  • Inline — For laying out flowing content that is allowed to wrap.
  • Columns — For fine-grained control of widths, spacing and alignment.

Layout

The buttons are arranged using a responsive Inline component. On mobile, the buttons are full width, and stacked vertically. Above mobile, the buttons are the width of their content sitting side by side, wrapping when necessary.
On mobile
Above mobile

Sizes

The size of all the buttons within an Actions component can be controlled uniformly via the size prop, which accepts either standard or small.The specified size will also be applied to any icons if provided.
Standard size
Small size
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Actions
  data={{ testid: 'actions-1' }}
  // => data-testid="actions-1"
>
  ...
</Actions>
Open in Playroom