EUIKit

Tags

Use the tag component for any small piece of content you want to draw attention to. It is useful for badges, content tagging, log listings, and the like.

Attribute	Required?	Default	Description
`type`	No	info	The color or type of this tag. Any of EUIKit's colors and types can be used.
`color`	No	(none)	An arbitrary color in hexadecimal RBG format (`#RRGGBB`). This will override any `type` attribute set. The tag will be rendered with this color as its background, and an appropriate lighter or darker foreground color will be used. See the examples below. If `color="random"`, a random color from the TailwindCSS palette will be chosen.
`lefticon`	No	(none)	Icon to place on the left side of the tag. It will not show any icon by default. The icon will be rendered with the `@svg()` Blade directive, so any icon pack in Blade Icons can be used. EUIKit supports Heroicons by default.
`righticon`	No	(none)	Icon to place on the right side of the tag. It will not show any icon by default. The icon will be rendered with the `@svg()` Blade directive, so any icon pack in Blade Icons can be used. EUIKit supports Heroicons by default.
`route`	No	(none)	Route to redirect to if this tag is clicked. Useful when `type="link"`, but can be used with any type. The presense of this attribute will render the message as an `<a />` tag instead of a `<span />`.

Because a tag is rendered at a small size, be aware that some icons will not look good scaled down. Heroicons has a "micro" set (heroicon-c-*) set that is designed for small sizes.

Other EUIKit components use the tag component internally to display badges.

Tag Examples

Light Dark Link Info Success Warning Danger Primary Ghost

color="#eaf" color="#09c" color="#136523"

Tags can exist inline with text ! .