React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Alert Badge
Basic Usage General Guidelines Priorities API Button ButtonGroup Card CheckboxField Modal Radio ScrollView SelectField Table TextArea TextField Toggle
Components: Layouts
CSS Helpers
Readme

# Badge

Badge highlights content with short additional information.

##
Basic Usage

To implement the Badge component, you need to import it first:

    import { Badge } from '@react-ui-org/react-ui';

And use it:

Hello!
<Badge label="Hello!" />

    <Badge label="Hello!" />

See
API for all available options.

## General Guidelines

Use badges to highlight content with a
short and brief additional information: a number, a word, but no more than two words.

## Priorities

There are two visual priorities of badges to choose from, from highest to lowest:

1. default
2. outline

All priorities come in following color variants (types):

- all UI colors: success, warning, error, help, info, note
- light color

### Default

High-emphasis priority to draw user's attention.

1
2
3
10
34
99+
365
<Badge label="1" type="success" /> <Badge label="2" type="warning" /> <Badge label="3" type="error" /> <Badge label="10" type="help" /> <Badge label="34" type="info" /> <Badge label="99+" type="note" /> <Badge label="365" type="light" />

    <Badge label="1" type="success" /><Badge label="2" type="warning" /><Badge label="3" type="error" /><Badge label="10" type="help" /><Badge label="34" type="info" /><Badge label="99+" type="note" /><Badge label="365" type="light" />

Success
Warning
Error
Help
Info
Note
Light
<Badge label="Success" type="success" /> <Badge label="Warning" type="warning" /> <Badge label="Error" type="error" /> <Badge label="Help" type="help" /> <Badge label="Info" type="info" /> <Badge label="Note" type="note" /> <Badge label="Light" type="light" />

    <Badge label="Success" type="success" /><Badge label="Warning" type="warning" /><Badge label="Error" type="error" /><Badge label="Help" type="help" /><Badge label="Info" type="info" /><Badge label="Note" type="note" /><Badge label="Light" type="light" />

### Outline

Medium-emphasis priority to provide additional context in an unobtrusive way.

1
2
3
10
34
99+
365
<Badge label="1" priority="outline" type="success" /> <Badge label="2" priority="outline" type="warning" /> <Badge label="3" priority="outline" type="error" /> <Badge label="10" priority="outline" type="help" /> <Badge label="34" priority="outline" type="info" /> <Badge label="99+" priority="outline" type="note" /> <Badge label="365" priority="outline" type="light" />

    <Badge label="1" priority="outline" type="success" /><Badge label="2" priority="outline" type="warning" /><Badge label="3" priority="outline" type="error" /><Badge label="10" priority="outline" type="help" /><Badge label="34" priority="outline" type="info" /><Badge label="99+" priority="outline" type="note" /><Badge label="365" priority="outline" type="light" />

Success
Warning
Error
Help
Info
Note
Light
<Badge label="Success" priority="outline" type="success" /> <Badge label="Warning" priority="outline" type="warning" /> <Badge label="Error" priority="outline" type="error" /> <Badge label="Help" priority="outline" type="help" /> <Badge label="Info" priority="outline" type="info" /> <Badge label="Note" priority="outline" type="note" /> <Badge label="Light" priority="outline" type="light" />

    <Badge label="Success" priority="outline" type="success" /><Badge label="Warning" priority="outline" type="warning" /><Badge label="Error" priority="outline" type="error" /><Badge label="Help" priority="outline" type="help" /><Badge label="Info" priority="outline" type="info" /><Badge label="Note" priority="outline" type="note" /><Badge label="Light" priority="outline" type="light" />

## API

id
string
undefined
label
string │ number
required
priority
'default' │ 'outline'
'default'
type
'error' │ 'help' │ 'info' │ 'note' │ 'success' │ 'warning' │ 'light'
'note'

Next: Button →