RFC: Brn Badge

[mihajm]

Badge

Assesment

Time	Complexity	Risk	Description
2	3	0	Some styles, some logic, shouldn't be very hard :)

Dependencies

None

brn

---

API (proposed)

The badge directive would add a badge element to the dom & apply an aria-role of status to the parent element.

<button brnBadge="5">Click</button>

type BadgePosition = "above after" | "above before" | "below before" | "below after" | "before" | "after" | "above" | "below";

type BadgeSize = "small" | "medium" | "large";

Proposed inputs

Input	Type	Default	Description
brnBadge	string/number/null/undefined	empty_string	the badges content
brnBadgeDescription	string	empty_string	the description to add to the aria-describedBy
brnBadgeHidden	boolean	false	hides the badge - this could also be removed and simply done when badge content is null or undefined
brnBadgeOverlap	boolean	true	overlaps the badge on the parent element
brnBadgePosition	BadgePosition	'above after'	the position of the badge relative to the parent element
brnBadgeSize	BadgeSize	'small'	the size of the badge

hlm

---

Already implemented :) I'd just compose it with the proposed brn directive.

Aria

---

Roles, States & Properties

Radix doesn't seem to have a badge component, looking around the web I've seen role="status" being applied, which seems reasonable to me.
Angular material also uses a description attribute to add an aria-describedBy to the parent elemnt, which seems like a good approach.
aria-label can be used, but should be provided by the user.

Radix

---

N/A

shadcn

---

API

import { Badge } from "@/components/ui/badge";

<Badge variant="outline">Badge</Badge>;

Source

https://ui.shadcn.com/docs/components/badge

[kunalvirk]

Hi,
Is it done? I would love to contribute with a little help.
Thanks,

[goetzrobin]

This is completed and a badge directive is available