Tag

Tag labels to insert anywhere

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>

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

Tag

Name	Description	Type	Values	Default
`type`	Type (color) of the icon, optional	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `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	Values	Default
`attached`	Tabs inside are attached together	Boolean	—	`false`

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub