Badge

Quick start

Here's a quick start guide to get started with the badge component

Importing Component

import { Badge } from "@hover-design/react";

Code Snippets and Examples

Badge Default

<div className="App">
  <Badge color="#321fdb" label="primary" />
  <Badge color="#2eb85c" label="success" />
  <Badge color="red" label="danger" />
  <Badge color="#f9b115" label="warning" />
  <Badge color="#39f" label="info" />
  <Badge color="#ebedef" textColor="#000" label="light" />
  <Badge color="#4f5d73" label="dark" />
</div>

primarysuccessdangerwarninginfolightdark

Badge with shapes

<div className="App">
  <Badge color="#321fdb" shape="rounded" label="primary" />
  <Badge color="#2eb85c" shape="rounded" label="success" />
  <Badge color="red" shape="rounded" label="danger" />
  <Badge color="#f9b115" shape="rounded" label="warning" />
  <Badge color="#39f" shape="rounded" label="info" />
  <Badge color="#ebedef" textColor="#000" shape="rounded" label="light" />
  <Badge color="#4f5d73" shape="rounded" label="dark" />
</div>

primarysuccessdangerwarninginfolightdark

Badge with position

<div className="App">
  <Badge color="red" label="3" shape="rounded" position="top-end">
    <Button variant="default">Notifications</Button>
  </Badge>
</div>

3

Badge with a child

<div className="App">
  <Button variant="dark">
    <Badge color="red" label="New" /> Profile
  </Button>
  <Button variant="default">
    Notifications <Badge color="red" label="7" shape="rounded" />
  </Button>
</div>

Props Referece

Attributes	Values	Optional ?
color	string	Yes
textColor	string	Yes
label	string ReactNode	No
shape	rounded | rounded-circle	Yes
hide	boolean;	Yes
position	top-start | top-end | bottom-start | bottom-end	Yes
ref	RefObject<HTMLButtonElement>;	Yes