Badge

Documentation of the <Badge /> component. Learn how to use it and its available props.

Installation#

To get started, install @exponentialeducation/betomic via yarn:

# Yarn
yarn add @exponentialeducation/betomic

Basic example#

Badges are small numerical values or status that describes UI elements. It consists of either a small circle or other set of characters.

import { Badge } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <Badge
        content="I'm a badge"
      />

      {/* ... */}
    </main>
  )
}

The previous example describes a way of using the Badge component, it renders a component like the following:

The prop content allows the user to specify the text or numerical values that will be display with the badge.

Badge customization#

Badges can be customized through the className prop to provide it with styles. The prop disabled also gives disabled styles and no-interaction to it.

import { Badge } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <Badge
        content="Course"
        className="bg-surface-500"
      />

      <Badge
        content="Module"
        className="bg-surface-200 text-secondary-900"
      />

      <Badge
        content="Quiz Status"
        className="bg-blue-200 text-blue-900"
      />

      <Badge
        content="Inactive"
        className="bg-surface-400"
      />

      <Badge
        content="Disable"
        disabled
      />

      {/* ... */}
    </main>
  )
}

Badge intents#

The Badge component comes with intents out of the box. The prop intent accepts the following intents and gives the badge styles accordingly.

import { Badge } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <Badge
        content="Success"
        intent="success"
      />

      <Badge
        content="Warning"
        intent="warning"
      />

      <Badge
        content="Error"
        intent="error"
      />

      <Badge
        content="Information"
        intent="info"
      />

      {/* ... */}
    </main>
  )
}

Oval#

The prop roundedFull sets a full rounded badge, giving it a circle or oval appearance.

import { Badge } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <Badge
        roundedFull
        className="bg-primary-500 font-bold"
      />
      
      <Badge
        roundedFull
        content="1"
        className="bg-surface-600 font-bold"
      />

      <Badge
        roundedFull
        content="1"
        className="bg-primary-500 font-bold"
      />

      {/* ... */}
    </main>
  )
}

Props#