Badges

Notification Bell

A glass notification trigger with a warm unread indicator.

notificationbellstatus

Installation

Copy and paste the code into your project.

Accessibility notes

The button has an aria-label; announce unread counts in nearby text when available.

Preview accent

TypeScript

export function NotificationBell() {
  return (
    <button
      aria-label="Open notifications"
      className="relative rounded-full border border-white/12 bg-white/[0.06] p-4 text-white shadow-xl transition hover:border-[#40E0D0]/35 hover:bg-[#40E0D0]/10"
      type="button"
    >
      <span className="block h-6 w-6 rounded-full border-2 border-current border-b-transparent" />
      <span className="absolute right-3 top-3 h-3 w-3 rounded-full border-2 border-[#0b0f14] bg-[#fb923c]" />
      <span className="absolute inset-x-0 bottom-2 mx-auto h-1 w-3 rounded-full bg-current" />
    </button>
  );
}

Usage

<NotificationBell />

Related components

AIPlanningWritingReviewing

Badges

Agent Status Ribbon

Beginner

A compact status ribbon for showing the current phase of an agent workflow.

agentstatusworkflow

View component

Prompt tuned

Badges

Prompt Badge

Beginner

A small status badge for prompt state, tuning, review, or evaluation labels.

promptstatusbadge

View component

EBAIQA

3 reviewers

Badges

Avatar Stack

Beginner

A small collaborator stack for reviews, presence, and team-owned workflows.

avatarpresenceteam

View component