Badge/Tag

A badge indicates a status information from the system. It is used to highlight a numerical characteristic or mark an item.

Basic usage

PrimarySuccessAttentionErrorNeutralPurple

import { Badge } from '@streamelements/frontend-ui';
...
<Badge color="success">Badge</Badge>
...

Appearance

Pass on a prop appearance to change the appearance of the badge. Available options are opaque and translucent.

PrimarySuccessAttentionErrorNeutralPurple

import { Badge } from '@streamelements/frontend-ui';
...
<Badge color="success" appearance="translucent">Badge</Badge>
...

Density

Pass on a prop density to change the padding of the Badge. Available options are default, compact and comfortable.

Tag+36Text

import { Badge } from '@streamelements/frontend-ui';
...
<Badge color="primary" appearance="translucent" density="default">Tag</Badge>
<Badge color="primary" appearance="translucent" density="compact">36</Badge>
<Badge color="primary" appearance="translucent" density="comfortable">Text</Badge>
...

API

The Badge component exposes the following props for style changes:

Props

Name	Type	Default value	Description
color	Colors	'neutral'	See examples
appearance	'opaque' | 'translucent'	'opaque'	See examples
density	'default' | 'compact' | 'comfortable'	'default'	'default' - Default Tag 'compact' - Badge numeric values 'comfortable' - Badge text values

Colors

Color	Value
primary	$uiPrimaryMain
success	$uiSuccessMain
attention	$uiAttentionMain
error	$uiErrorMain
neutral	#999999
purple	#7B3EFE