Components

Badge

Indicator of values such as labeling or notification

Selected Theme

Select brand or tribe name to preview style

Default Theme

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

Avatar

Bottom Sheet

Do you have feedback?

Please let us know to make it better

Send Feedback