badge
Small status label from the Figma Make library: default, secondary, destructive, and outline variants; a 3px focus ring; and a destructive ring when invalid.
How to add it
Import BadgeComponent from @tastival.net/ui, add it to the standalone component imports, then use the badge element. Later common components can compose this same element.
Import
import { BadgeComponent } from '@tastival.net/ui';
@Component({
imports: [BadgeComponent],
})
export class ExampleComponent {}Usage
<badge variant="default" className="w-fit">Default</badge>
<badge variant="secondary" className="ml-2">New</badge>
<badge variant="destructive" className="uppercase" aria-invalid="true">Alert</badge>
<badge variant="outline" className="tracking-wide">Draft</badge>Variants
Playground
Preview