Badge 10.21.0

ARIA
RTL

The Badge component is typically used to display statuses (i.e. online, idle, offline) or numbers representing the count of items in a given list (i.e. List of notifications or unread messages).

Default

Default Badge is rendered as a small circle with a background color. Use it as <Badge />.

"use client";

import { Badge } from "@heathmont/moon-core-tw";

const BadgeDefault = () => <Badge />;

export default BadgeDefault;

    Label

    You can use children | children() to change the appearance of the badge to numeric type.

    222
    "use client";

import { Badge } from "@heathmont/moon-core-tw";

const BadgeLabel = () => <Badge>222</Badge>;

export default BadgeLabel;

      Anchor Element

      Add a wrapper element around the Badge with css position relative. You can use it along with other elements and position it as needed. inline-block is default.

      Absolute position
      Inline position
      "use client";

import { Badge } from "@heathmont/moon-core-tw";

const BadgeAnchorElement = () => (
  <>
    <div className="relative">
      <span>Absolute position</span>
      <Badge className="absolute top-0 -right-2" />
    </div>
    <div>
      <Badge />
      <span className="ml-2">Inline position</span>
    </div>
  </>
);

export default BadgeAnchorElement;

        Customization

        Add any css class to the <Badge /> component for customization as needed by the use of property className. Use css preprocessor/framework of your preference.

        222
        "use client";

import { Badge } from "@heathmont/moon-core-tw";

const BadgeCustomization = () => (
  <>
    <Badge className="bg-dodoria" />
    <Badge className="bg-whis">222</Badge>
  </>
);

export default BadgeCustomization;

          Badge

          These are props specific to the Badge component:

          Name
          Type
          Default
          className
          		string-
          children
          		-