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