Badge

A versatile badge component that works as both a standalone badge and a wrapper that positions a badge over any content.

Live Demo

Standalone Badges

53!0

Pill Type

New99+HotBeta

With Buttons

3

12

With NavButton (Text)

5

12

3

With NavButton (Icon Only)

7

99+

2

0

With Icon Component

3

Dot Mode

When no content is provided in the default slot, the badge renders as a small dot - useful for status indicators.

Usage

Standalone Badge

<template>
  <orio-badge>5</orio-badge>
  <orio-badge variant="danger">Error</orio-badge>
  <orio-badge type="pill">New</orio-badge>
</template>

With NavButton

<template>
  <!-- With text -->
  <orio-badge variant="danger">
    <template #wrapping>
      <orio-nav-button icon="mail">Inbox</orio-nav-button>
    </template>
    5
  </orio-badge>

  <!-- Icon only -->
  <orio-badge variant="primary">
    <template #wrapping>
      <orio-nav-button icon="bell" />
    </template>
    3
  </orio-badge>
</template>

Dot Mode

<template>
  <orio-badge variant="danger">
    <template #wrapping>
      <orio-nav-button icon="bell" />
    </template>
  </orio-badge>
</template>

Props

Prop	Type	Default	Description
variant	'danger' | 'alert' | 'primary' | 'grey'	'primary'	Badge color variant
type	'default' | 'pill'	'default'	Badge border radius style

Slots

Slot	Description
default	Badge content. If empty, badge renders as a dot
wrapping	Content to wrap. Badge positions top-right over this