Tag

The Tag component (also known as Badge) is a small but versatile element. It's very useful as a way to attach information to a block or other components. Its size makes it also easy to display in numbers, making it appropriate for long lists of items.

Examples

Base

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-tag>Tag label</o-tag>
        <o-tag label="Rounded tag label" rounded />
        <o-tag icon="plus">Tag with icon</o-tag>
    </p>
</section>

Closeable

Closeable tags have a button that can be focused, it emits a close event when clicked. The button can be overriden by the close slot.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-tag closeable variant="primary" aria-close-label="Close tag">
            Colored closeable tag label
        </o-tag>

        <o-tag closeable aria-close-label="Close tag">
            <template #default>
                Attached tag label with custom and colored icon
            </template>

            <template #close> Cancel </template>
        </o-tag>
    </p>
</section>

Badge

Using the badge style with the badge prop can highlight information to a user or draw their attention to a specific element. Badges typically display numbers or icons.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-button icon-left="trash" variant="primary">
            Trash <o-tag label="12" />
        </o-button>
        <o-button>
            Notifications <o-tag label="4" badge size="small" />
        </o-button>
    </p>
    <p>
        <o-button>
            Profile <o-tag badge rounded variant="danger" />
        </o-button>
        <o-button>
            Inbox
            <o-tag
                label="99+"
                badge
                rounded
                variant="danger"
                size="small" />
        </o-button>
    </p>
</section>

Variants

Like with buttons, different styles can be achieved with the variant prop.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-tag label="Default" />
        <o-tag label="Primary" variant="primary" />
        <o-tag label="Secondary" variant="secondary" />
        <o-tag label="Success" variant="success" />
        <o-tag label="Info" variant="info" />
        <o-tag label="Warning" variant="warning" />
        <o-tag label="Danger" variant="danger" />
    </p>
</section>

Sizes

The component can also be displayed in different sizes using the size prop.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-tag label="Small" size="small" />
        <o-tag label="Default" />
        <o-tag label="Medium" size="medium" />
        <o-tag label="Large" size="large" />
    </p>
</section>

Tag Component

Small tag labels to insert anywhere.

<o-tag></o-tag>

Props

Prop name	Description	Type	Values	Default
ariaCloseLabel	Accessibility label for the close button	string	-	From config: tag: {   ariaCloseLabel: "Close" }
badge	Enable badge style	boolean	-
closeIcon	Close icon name	string	-	From config: tag: {   closeIcon: "close" }
closeIconSize	Size of close icon	string	small, medium, large	From config: tag: {   closeIconSize: undefined }
closeable	Add close button to close the item	boolean	-	false
icon	Adds an icon to the left of the tag	string	-
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: tag: {   iconPack: undefined }
label	Tag label, unnecessary when default slot is used	string	-
override	Override existing theme classes completely	boolean	-
rounded	Enable rounded style	boolean	-	From config: tag: {   rounded: false }
size	Size of the control	string	small, medium, large	From config: tag: {   size: undefined }
variant	Color variant of the breadcrumb	string	primary, info, success, warning, danger, and any other custom color	From config: tag: {   variant: undefined }

Events

Event name	Properties	Description
close	event Event - native event	on close icon click event

Slots

Name	Description	Bindings
default	Override the tag label
close	Define a custom close icon

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class Inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
sizeClass	Class of the root element with size.	size	small medium large
variantClass	Class of the root element with variant.	variant	primary info warning danger
badgeClass	Class of the root element when badge style.	badge
roundedClass	Class of the root element when rounded.	rounded
labelClass	Class of the label element.
iconClass	Class of the item icon element.	icon
closeClass	Class of the tag item close button element.	closeable

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default
$tag-padding	0 0.75em
$tag-color	h.useVar("font-color")
$tag-font-size	h.useVar("font-size")
$tag-font-weight	h.useVar("font-weight")
$tag-line-height	h.useVar("line-height")
$tag-height	h.useVar("control-height")
$tag-icon-spacer	h.useVar("control-spacer")
$tag-close-color	h.useVar("font-color")
$tag-box-shadow	unset
$tag-background-color	h.useVar("grey-lightest")
$tag-border-color	transparent
$tag-border-style	solid
$tag-border-width	h.useVar("control-border-width")
$tag-border-radius	h.useVar("border-radius")
$tag-border-radius-rounded	h.useVar("border-radius-rounded")

See ➜ 📄 SCSS file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default
$badge-bg	$light
$badge-color	$dark
$badge-icon-space	0.25em
$badge-border-color	transparent

See ➜ 📄 SCSS file