Basic
Description
This component is used to display a tag. A tag is a small label that can be used to display metadata or a status.
You can use icons with the icon component, the library will take care of the spacing between the icon and the text and the icon size.
API
Supports global configuration
View the default configuration for this component. Learn more about global configuration.
import { LuiTagModule } from '@lqvrent-workspace/lqvrent-ui/tag';<lui-tag>Tag</lui-tag>lui-tag
| Property | Description | Type | Default |
|---|---|---|---|
[luiMode] | Tag mode | "default" | "closeable" | "default" |
[luiColor] | Color of the tag. Can take a tailwind color (ex: indigo) or any input accepted by LuiColor | ColorInput | defined in config |
[luiSize] | Size of the tag | "small" | "default" | "large" | "default" |
[luiShape] | Shape of the tag | "default" | "rounded" | "default" |
[luiFlat] | Hides the borders of the tag | boolean | false |
[luiDot] | Show a dot and remove the background color to fill the dot | boolean | false |
[luiAriaLabelClose] | aria-label attribute for close tag button | string | Close tag |
(luiOnClose) | Emitted when close button is clicked. You can use preventDefault on the event. | EventEmitter<MouseEvent> | - |