Feedback

Badge

Toast components deliver brief, non-intrusive notifications, providing quick updates and enhancing the user experience with smooth, unobtrusive interactions.

View Figma UI Kit

View GitHub repo

WCAG 2.1 accessibility compliant

SM

Default

Brand

Secondary

Information

Success

Warning

Error

XL

Default

Brand

Secondary

Information

Success

Warning

Error

React Native

<Badge variant={'default'} accessibilityRole='text' accessibilityLabel='Default badge'>
<Text>Default</Text>
</Badge>

<Badge variant={'brand'} accessibilityRole='text' accessibilityLabel='Brand badge'>
<Text>Brand</Text>
</Badge>

<Badge variant={'secondary'} accessibilityRole='text' accessibilityLabel='Secondary badge'>
<Text>Secondary</Text>
</Badge>

<Badge
variant={'error'}
accessibilityRole='text'
accessibilityLabel='Error status'
accessibilityState={{ busy: false, disabled: false }}
>
<Text>Error</Text>
</Badge>

<Badge
variant={'success'}
accessibilityRole='text'
accessibilityLabel='Success status'
accessibilityState={{ busy: false, disabled: false }}
>
<Text>Success</Text>
</Badge>

<Badge
variant={'warning'}
accessibilityRole='text'
accessibilityLabel='Warning status'
accessibilityState={{ busy: false, disabled: false }}
>
<Text>Warning</Text>
</Badge>

<Badge
variant={'information'}
accessibilityRole='text'
accessibilityLabel='Information status'
accessibilityState={{ busy: false, disabled: false }}
>
<Text>Information</Text>
</Badge>

WCAG 2.1 accessibility checks

1.3.1 Info and Relationships (Level A)

1.4.3 Contrast (Minimum) (Level AA)

2.4.6 Headings and Labels (Level AA)

4.1.2 Name, Role, Value (Level A)

4.1.3 Status Messages (Level AA)

Alert

Dialog