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.

Hidden

Use the hidden prop to suppress the badge without removing the wrapping content. Toggle it reactively to show or hide the badge based on application state.

4

New

Usage

Standalone Badge

<template>
  <orio-badge>5</orio-badge>
  <orio-badge variant="danger">Error</orio-badge>
  <orio-badge 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>

Hidden

<template>
  <!-- Standalone badge -->
  <orio-badge :hidden="!hasUnread">New</orio-badge>

  <!-- Positioned badge — wrapping content still renders when hidden -->
  <orio-badge variant="danger" :hidden="!hasNotifications">
    <template #wrapping>
      <orio-nav-button icon="bell" />
    </template>
    4
  </orio-badge>
</template>

Props

Prop	Type	Default	Description
variant	'danger' | 'alert' | 'primary' | 'grey'	'primary'	Badge color variant
pill	boolean	false	Renders with pill (fully rounded) shape
hidden	boolean	false	When true, the badge is not rendered

Slots

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