Badge

An information box.

The Badge component serves the purpose of presenting information to the user. It can display some quick info and can be customized to draw the user's attention by modifying its color, size and other properties.

Source code

Theme

Variants

Badge

Tone

Color

Size

Shadow

Shadow Color

Radius

import { Badge } from '@rewind-ui/core';

function App() {
  return (
    <Badge>Badge</Badge>
  );
}

Import

Import the Badge component using the following import statement.

import { Badge } from '@rewind-ui/core';

Variants

The Badge component comes with a number of pre-defined variants that can be used to change the appearance of the component. The variants can be used by passing the variant name as a prop to the component. A variant is basically a pre-set set of properties. Read more about variants here.

Available variants are: primary, secondary, link, danger, success, warning and info.

PrimarySecondaryDangerSuccessWarningInfo

<View>
  <Badge variant="primary">Primary</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="danger">Danger</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="info">Info</Badge>
</View>

Tones & Colors

The Badge component comes with four tones: solid, light, glossy and outline.

The available color values are: white, blue, red, green, yellow, purple, gray, dark and black.

Solid

WhiteBlueRedGreenYellowPurpleGrayDarkBlack

<View>
  <Badge color="white">White</Badge>
  <Badge color="blue">Blue</Badge>
  <Badge color="red">Red</Badge>
  <Badge color="green">Green</Badge>
  <Badge color="yellow">Yellow</Badge>
  <Badge color="purple">Purple</Badge>
  <Badge color="gray">Gray</Badge>
  <Badge color="dark">Dark</Badge>
  <Badge color="black">Black</Badge>
</View>

Light

WhiteBlueRedGreenYellowPurpleGrayDarkBlack

<View>
  <Badge tone="light" color="white">White</Badge>
  <Badge tone="light" color="blue">Blue</Badge>
  <Badge tone="light" color="red">Red</Badge>
  <Badge tone="light" color="green">Green</Badge>
  <Badge tone="light" color="yellow">Yellow</Badge>
  <Badge tone="light" color="purple">Purple</Badge>
  <Badge tone="light" color="gray">Gray</Badge>
  <Badge tone="light" color="dark">Dark</Badge>
  <Badge tone="light" color="black">Black</Badge>
</View>

Glossy

WhiteBlueRedGreenYellowPurpleGrayDarkBlack

<View>
  <Badge tone="glossy" color="white">White</Badge>
  <Badge tone="glossy" color="blue">Blue</Badge>
  <Badge tone="glossy" color="red">Red</Badge>
  <Badge tone="glossy" color="green">Green</Badge>
  <Badge tone="glossy" color="yellow">Yellow</Badge>
  <Badge tone="glossy" color="purple">Purple</Badge>
  <Badge tone="glossy" color="gray">Gray</Badge>
  <Badge tone="glossy" color="dark">Dark</Badge>
  <Badge tone="glossy" color="black">Black</Badge>
</View>

Outline

WhiteBlueRedGreenYellowPurpleGrayDarkBlack

<View>
  <Badge tone="outline" color="white">White</Badge>
  <Badge tone="outline" color="blue">Blue</Badge>
  <Badge tone="outline" color="red">Red</Badge>
  <Badge tone="outline" color="green">Green</Badge>
  <Badge tone="outline" color="yellow">Yellow</Badge>
  <Badge tone="outline" color="purple">Purple</Badge>
  <Badge tone="outline" color="gray">Gray</Badge>
  <Badge tone="outline" color="dark">Dark</Badge>
  <Badge tone="outline" color="black">Black</Badge>
</View>

Sizes

Available size values are: xs, sm, md and lg.

BadgeBadgeBadgeBadge

<View>
  <Badge size="xs">Badge</Badge>
  <Badge size="sm">Badge</Badge>
  <Badge size="md">Badge</Badge>
  <Badge size="lg">Badge</Badge>
</View>

Radiuses

Available radius values are: none, sm, base, md, lg and full.

BadgeBadgeBadgeBadgeBadgeBadge

<View>
  <Badge radius="none">Badge</Badge>
  <Badge radius="sm">Badge</Badge>
  <Badge radius="base">Badge</Badge>
  <Badge radius="md">Badge</Badge>
  <Badge radius="lg">Badge</Badge>
  <Badge radius="full">Badge</Badge>
</View>

Shadows

Available shadow values are: none, sm, base, md, lg and xl.

BadgeBadgeBadgeBadgeBadgeBadge

<View>
  <Badge shadow="none">Badge</Badge>
  <Badge shadow="sm">Badge</Badge>
  <Badge shadow="base">Badge</Badge>
  <Badge shadow="md">Badge</Badge>
  <Badge shadow="lg">Badge</Badge>
  <Badge shadow="xl">Badge</Badge>
</View>

Shadow colors

Available shadowColor values are: blue, red, green, yellow, purple, gray, dark and black.

BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge

<View>
  <Badge shadow="lg" color="blue" shadowColor="blue">Badge</Badge>
  <Badge shadow="lg" color="red" shadowColor="red">Badge</Badge>
  <Badge shadow="lg" color="green" shadowColor="green">Badge</Badge>
  <Badge shadow="lg" color="yellow" shadowColor="yellow">Badge</Badge>
  <Badge shadow="lg" color="purple" shadowColor="purple">Badge</Badge>
  <Badge shadow="lg" color="gray" shadowColor="gray">Badge</Badge>
  <Badge shadow="lg" color="dark" shadowColor="dark">Badge</Badge>
  <Badge shadow="lg" color="black" shadowColor="black">Badge</Badge>
</View>

Examples

With icon

+$250-$150

<View>
  <Badge color="green" tone="outline"><ChartLineUp size={16} className="mr-1" weight="duotone" />+$250</Badge>
  <Badge color="red" tone="outline"><ChartLineDown size={16} className="mr-1" weight="duotone" />-$150</Badge>
</View>

Button badge

<View>
  <Button color="purple" tone="outline" className="relative">
    <Badge size="xs" color="purple" radius="full" className="absolute -right-3 -top-2.5">10</Badge>
    <span>View Tickets</span>
  </Button>
</View>

<View>
  <Button color="black" tone="outline" className="space-x-2">
    <span>Notifications</span>
    <Badge size="xs" color="black" radius="full">10</Badge>
  </Button>
</View>

API Reference

Properties

Prop	Type	Description	Default
color	`BadgeColor`	Sets the color	`dark`
radius	`BadgeRadius`	Sets the border radius	`md`
shadow	`BadgeShadow`	Sets the shadow size	`none`
shadowColor	`BadgeShadowColor`	Sets the shadow color	`none`
size	`BadgeSize`	Sets the badge size	`sm`
tone	`BadgeTone`	Sets the badge tone	`solid`
variant	`BadgeVariant`	Sets the badge variant	`true`

Types

type BadgeColor =
  | 'white'
  | 'blue'
  | 'red'
  | 'green'
  | 'yellow'
  | 'purple'
  | 'gray'
  | 'dark'
  | 'black';

type BadgeRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';

type BadgeShadow = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl';

type BadgeShadowColor =
  | 'none'
  | 'white'
  | 'blue'
  | 'red'
  | 'green'
  | 'yellow'
  | 'purple'
  | 'gray'
  | 'dark'
  | 'black';

type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';

type BadgeTone = 'solid' | 'light' | 'glossy' | 'outline';

type BadgeVariant =
  | 'primary'
  | 'secondary'
  | 'danger'
  | 'success'
  | 'warning'
  | 'info';

Avatar Breadcrumbs