Layered Badge Icon

Create a Vue component that displays an icon with an optional text badge layered on top.

Capabilities

Render badge overlay

• Shows the provided badge text over the icon at the default top-right corner; omits the badge when no text is provided. @test

Badge positioning

• Places the badge at the requested corner (top-left, top-right, bottom-left, bottom-right) without shifting the base icon layout. @test

Counter styling and accessibility

• When counter is true, renders numeric badges with counter styling and exposes an accessible label that includes both the icon description and badge value. @test

Implementation

@generates

API

export type BadgeCorner = "top-left" | "top-right" | "bottom-left" | "bottom-right";

export interface LayeredBadgeProps {
  icon: unknown; // identifier accepted by the icon dependency
  badge?: string | number;
  badgeCorner?: BadgeCorner; // default "top-right"
  fixedWidth?: boolean; // optional to align with surrounding text
  counter?: boolean; // toggle counter visual style for numeric badges
  title?: string; // accessible label for the layered output
}

export const LayeredBadge: import("vue").DefineComponent<LayeredBadgeProps>;

Dependencies { .dependencies }

@fortawesome/vue-fontawesome { .dependency }

Provides layered icon rendering and text overlay support for badges.