Badge

Badges are really great for labels and count values.

Contextual Variations

The theme prop allows you to easily change the appearance of your badge using the main theme colors: primary, secondary, success, danger, warning, info, light and dark.

PrimarySecondarySuccessInfoWarningDangerLightDark

import React from "react";
import { Badge } from "shards-react";

export default function ContextualBadgesExamples() {
  return (
    <div className="example">
      <Badge>Primary</Badge>
      <Badge theme="secondary">Secondary</Badge>
      <Badge theme="success">Success</Badge>
      <Badge theme="info">Info</Badge>
      <Badge theme="warning">Warning</Badge>
      <Badge theme="danger">Danger</Badge>
      <Badge theme="light">Light</Badge>
      <Badge theme="dark">Dark</Badge>
    </div>
  );
}

Pill-Shaped Badges

The pill prop applies a larger border radius that make your badges to look rounded.

PrimarySecondarySuccessInfoWarningDangerLightDark

import React from "react";
import { Badge } from "shards-react";

export default function PillBadgesExamples() {
  return (
    <div className="example">
      <Badge pill>Primary</Badge>
      <Badge pill theme="secondary">
        Secondary
      </Badge>
      <Badge pill theme="success">
        Success
      </Badge>
      <Badge pill theme="info">
        Info
      </Badge>
      <Badge pill theme="warning">
        Warning
      </Badge>
      <Badge pill theme="danger">
        Danger
      </Badge>
      <Badge pill theme="light">
        Light
      </Badge>
      <Badge pill theme="dark">
        Dark
      </Badge>
    </div>
  );
}

Outline Badges

The outline prop removes the background color and applies a thin border that make your badges to look outlined.

PrimarySecondarySuccessInfoWarningDangerLightDark

import React from "react";
import { Badge } from "shards-react";

export default function OutlineBadgesExamples() {
  return (
    <div className="example">
      <Badge outline>Primary</Badge>
      <Badge outline theme="secondary">
        Secondary
      </Badge>
      <Badge outline theme="success">
        Success
      </Badge>
      <Badge outline theme="info">
        Info
      </Badge>
      <Badge outline theme="warning">
        Warning
      </Badge>
      <Badge outline theme="danger">
        Danger
      </Badge>
      <Badge outline theme="light">
        Light
      </Badge>
      <Badge outline theme="dark">
        Dark
      </Badge>
    </div>
  );
}

Mixed Effects

You can also mix both the pill and outline props to get mixed results.

PrimarySecondarySuccessInfoWarningDangerLightDark

import React from "react";
import { Badge } from "shards-react";

export default function MixedBadgesExamples() {
  return (
    <div className="example">
      <Badge outline pill>
        Primary
      </Badge>
      <Badge outline pill theme="secondary">
        Secondary
      </Badge>
      <Badge outline pill theme="success">
        Success
      </Badge>
      <Badge outline pill theme="info">
        Info
      </Badge>
      <Badge outline pill theme="warning">
        Warning
      </Badge>
      <Badge outline pill theme="danger">
        Danger
      </Badge>
      <Badge outline pill theme="light">
        Light
      </Badge>
      <Badge outline pill theme="dark">
        Dark
      </Badge>
    </div>
  );
}

Link Badges

Using the href prop you can turn your badges into regular links.

Primary Secondary Success Info Warning Danger Light Dark

import React from "react";
import { Badge } from "shards-react";

export default function LinkBadgesExamples() {
  return (
    <div className="example">
      <Badge href="#">Primary</Badge>
      <Badge href="#" theme="secondary">
        Secondary
      </Badge>
      <Badge href="#" theme="success">
        Success
      </Badge>
      <Badge href="#" theme="info">
        Info
      </Badge>
      <Badge href="#" theme="warning">
        Warning
      </Badge>
      <Badge href="#" theme="danger">
        Danger
      </Badge>
      <Badge href="#" theme="light">
        Light
      </Badge>
      <Badge href="#" theme="dark">
        Dark
      </Badge>
    </div>
  );
}

Props

The following props are available for the Badge component.

Prop	Description	Type	Default	Required
children	The children nodes.	`Node`	-	No
className	The class name.	`String`	-	No
theme	The theme color.	`String`	`"primary"`	No
outline	Whether it should be outlined, or not.	`Bool`	`false`	No
pill	Whether it should be a pill, or not.	`Bool`	`false`	No
tag	The component tag.	`FuncString`	`"span"`	No