Patterns

Reusable compositions of Braid components for common product experiences, plus practical how-tos for applying them.

Allows users to select multiple items in a list and apply the same action to all of them.

Displays a list of related items separated by dividers, for easy scannability.

Displays a message in place of content when none is available, guiding users on what to do next.

Displays a message when an expected action fails, alerting users to the problem and how to proceed.

Allows users to narrow down content or data by one or more criteria, making relevant items easier to find.

Displays a structured set of input fields that guides users through entering, validating, and submitting information.

Represents a group of components and patterns used to communicate conditions, events, or responses to user actions.

Displays a prominent, actionable message that drives users toward a specific behaviour relevant to their current context.

Represents a group of components and patterns used to reveal non-critical, supplementary information without cluttering the primary content.

Informs users of an existing or upcoming outage or reduced service level, affecting the whole system or specific products.

Displays visual placeholders that mimic real content while it loads, giving the impression of faster, progressive loading.

Allows users to share content, such as a job ad or article, to their social networks or with specific individuals.

Page-level starting points for building new screens. Copy a layout or section and swap in your content.

Full-page structural starting points for new screens.

Composable content blocks to drop into page layouts.

Practical guidance for applying Braid to specific layout and visual problems.

How to adjust the size and spacing of components to create a more airy or more condensed UI.

How to tailor page width and layout to balance readability, scannability, and adaptability across devices.