CataUiBadge

A lightweight, versatile badge component that can display labels with optional icons and close buttons. Badges are useful for highlighting statuses, categories, tags, or displaying metadata in a compact format.

UserRoleFilter

<!-- Basic badge -->
<CataUiBadge label="Role" />

<!-- Badge with an icon -->
<CataUiBadge label="User" icon="bi-person-fill" />

<!-- Badge with custom color -->
<CataUiBadge label="Custom" color="255, 0, 0" />

<!-- Closeable badge -->
<CataUiBadge label="Filter" closeable @close="handleClose" />

<!-- Badge with all properties -->
<CataUiBadge label="Complete" icon="bi-check-circle" color="0, 140, 171" closeable />

Props

Prop	Description	Type	Default	Required
closeable	When true, displays a close button that emits a 'close' event when clicked	Boolean	false	false
color	RGB color value used for the border and background (e.g. '0, 140, 171')	String	'var(--color-primary-100-rgb)'	false
icon	Bootstrap icon class with bi- prefix (see Icons)	String	''	false
label	Text content displayed within the badge	String	''	false

Emits

Emit	Description
close	Triggered when the close button is clicked (only when closeable=true)