Components

Badge

Indicator of values such as labeling or notification

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Badges are small status descriptors for ui elements. a badge consists of a small circle, usually containing a number or other short character, that appears near other objects. badges should always be applied to block level elements.

import { Badge } from 'legion-ui';

Variant

Badge has several variants being primary, secondary, info, warning, success, and error. By default it is set to primary.

Primary

Secondary

Information

Warning

Success

Error

  <Badge size="lg" variant="primary">Primary</Badge>
  <Badge size="lg" variant="secondary">Secondary</Badge>
  <Badge size="sm" variant="primary">10</Badge>
  <Badge size="sm" variant="secondary">20</Badge>
  <Badge size="lg" variant="info">Information</Badge>
  <Badge size="lg" variant="warning">Warning</Badge>
  <Badge size="lg" variant="success">Success</Badge>
  <Badge size="lg" variant="error">Error</Badge>

Bordered

You can make your badge bordered up if you’d like to, to provide your style needs. By default it is set to false.

Bordered

Unbordered

  <Badge size="lg" bordered>Bordered</Badge>
  <Badge size="lg" bordered>Bordered</Badge>
  <Badge size="lg">Unbordered</Badge>
  <Badge size="lg">Unbordered</Badge>

As Additionals

You can provide an additional badge to accompany your Avatar for example.

<div class="ruby">
  <div class="inherit mr-8">
    <Avatar size="large" src="https://rickandmortyapi.com/api/character/avatar/192.jpeg" />
    <Badge size="lg" variant="online" bordered mt={-3} />
  </div>
  <div class="inherit">
    <Avatar size="medium" src="https://rickandmortyapi.com/api/character/avatar/192.jpeg" />
    <Badge size="lg" variant="online" bordered mt={-3} />
  </div>

Attribute

Size

The switch has two sizes, large and small. By default it is set to small.

Badge

  <Badge size="lg">Badge</Badge>
  <Badge size="sm">Badge</Badge>

Props

property	propType	required	default	description
bordered	boolean	-	-	Set if the badge should be bordered or not
size	`sm` \| `lg`	-	`lg`	Set the size of the badge
style	object	-	-	The `style` prop lets you style elements inline
variant	`primary` \| `secondary` \| `info` \| `warning` \| `success` \| `error`	-	`primary`	Set the variant of the badge

Do you have feedback?

Please let us know to make it better

Send Feedback