BRAID
Braid Design System
GuidesFoundationsComponentsPatternsStyles

IconCompany

INACTIVE
ACTIVE
 
Open in Playroom

Toggling active state

The icon can be marked as active using the active prop.
(Click icon above to toggle active state)
 
Open in Playroom

Tailoring the appearance

For details about tailoring the appearance of icons see the iconography documentation.

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.
<Icon
  data={{ testid: 'icon-1' }}
  // => data-testid="icon-1"
/>
On this page