Tag

Tag

Small tag labels to insert anywhere

The tag is a small but versatile element. It's very useful as a way to attach information to a block or other component. Its size makes it also easy to display in numbers, making it appropriate for long lists of items. By default, a tag is a 1.5rem high label.

Tag label

<span class="tag">
    Tag label
</span>

Colors

Black Dark Light White Primary Mix Info Success Warning Danger Primary Mix Info Success Warning Danger

<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-mix">Mix</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>

<span class="tag is-primary is-light">Primary</span>
<span class="tag is-mix is-light">Mix</span>
<span class="tag is-info is-light">Info</span>
<span class="tag is-success is-light">Success</span>
<span class="tag is-warning is-light">Warning</span>
<span class="tag is-danger is-light">Danger</span>

Tag label Rounded tag label

<template>
    <section>
        <b-tag>Tag label</b-tag>
        <b-tag rounded>Rounded tag label</b-tag>
    </section>
</template>

Closable tags have a button that can be focused, it emits a close event when clicked or when delete key is pressed.

Closable

Colored closable tag label

Attached closable tag label

Colored attached closable tag label

<template>
    <section>
        <div class="field">
            <b-tag v-if="isTag1Active"
                type="is-primary"
                closable
                aria-close-label="Close tag"
                @close="isTag1Active = false">
                Colored closable tag label
            </b-tag>
        </div>

        <div class="field">
            <b-tag v-if="isTag2Active"
                attached
                closable
                aria-close-label="Close tag"
                @close="isTag2Active = false">
                Attached closable tag label
            </b-tag>
        </div>

        <div class="field">
            <b-tag v-if="isTag3Active"
                type="is-danger"
                attached
                closable
                aria-close-label="Close tag"
                @close="isTag3Active = false">
                Colored attached closable tag label
            </b-tag>
        </div>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isTag1Active: true,
                isTag2Active: true,
                isTag3Active: true
            }
        }
    }
</script>

Tag list

First Second Third Fourth Fifth

<template>
    <b-taglist>
        <b-tag type="is-info">First</b-tag>
        <b-tag type="is-info">Second</b-tag>
        <b-tag type="is-info">Third</b-tag>
        <b-tag type="is-info">Fourth</b-tag>
        <b-tag type="is-info">Fifth</b-tag>
    </b-taglist>
</template>

Use the attached prop to attach tags together.

npm 0.5.1

<template>
    <b-taglist attached>
        <b-tag type="is-dark">npm</b-tag>
        <b-tag type="is-info">0.5.1</b-tag>
    </b-taglist>
</template>

Combine with field to group attached tags.

npm 0.5.1

downloads 15k

chat on discord

Technology

Vuejs

CSS

Flexbox

<template>
    <section>
        <b-field grouped group-multiline>
            <div class="control">
                <b-taglist attached>
                    <b-tag type="is-dark">npm</b-tag>
                    <b-tag type="is-info">0.5.1</b-tag>
                </b-taglist>
            </div>

            <div class="control">
                <b-taglist attached>
                    <b-tag type="is-dark">downloads</b-tag>
                    <b-tag type="is-success">15k</b-tag>
                </b-taglist>
            </div>

            <div class="control">
                <b-taglist attached>
                    <b-tag type="is-dark">chat</b-tag>
                    <b-tag type="is-primary">on discord</b-tag>
                </b-taglist>
            </div>
        </b-field>
        <br>

        <b-field grouped group-multiline>
            <div class="control">
                <b-tag type="is-primary"
                    attached
                    aria-close-label="Close tag"
                    closable>
                    Technology
                </b-tag>
            </div>

            <div class="control">
                <b-tag type="is-primary"
                    attached
                    aria-close-label="Close tag"
                    closable>
                    Vuejs
                </b-tag>
            </div>

            <div class="control">
                <b-tag type="is-primary"
                    attached
                    aria-close-label="Close tag"
                    closable>
                    CSS
                </b-tag>
            </div>

            <div class="control">
                <b-tag type="is-primary"
                    attached
                    aria-close-label="Close tag"
                    closable>
                    Flexbox
                </b-tag>
            </div>
        </b-field>
    </section>
</template>

Sizes

Two additional sizes.

Default Medium Large

<template>
    <section>
        <b-tag type="is-dark">Default</b-tag>
        <b-tag type="is-primary" size="is-medium">Medium</b-tag>
        <b-tag type="is-info" size="is-large">Large</b-tag>
    </section>
</template>

API

Name	Description	Type	Value	Default
`type`	Type (color) of the icon, optional	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-mix`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	—
`size`	Size of the tab, optional	String	`is-medium`, `is-large`	—
`rounded`	Tag border rounded	Boolean	—	`false`
`closable`	Add close/delete button to the tag	Boolean	—	`false`
`attached`	Close/delete button style equal to attached tags	Boolean	—	`false`
`ellipsis`	Adds ellipsis to not overflow the text	Boolean	—	`false`
`tabstop`	If should stop when using tab key	Boolean	—	`true`
`disabled`	Disable delete button	Boolean	—	`false`
`aria-close-label`	Accessibility label for the close button	String	—	-

Name	Description	Parameters
`close`	Triggers when close/delete button is clicked or delete key is pressed	—

Taglist

Name	Description	Type	Value	Default
`attached`	Tabs inside are attached together	Boolean	—	`false`

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$tag-background-color`	color	`$background`
`$tag-color`	color	`$text`
`$tag-radius`	size	`$radius`
`$tag-delete-margin`	size	`1px`