BRAID
Braid Logo
 

IconEnlarge

INACTIVE
ACTIVE
Open in Playroom

Toggling active state

Often used to toggle between englarged and reduced states, setting the active prop to true will reverse the icon’s intent.
(Click icon above to toggle)
Open in Playroom

Customising the appearance

For details about customising 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"
/>
Open in Playroom