Tag

Tag labels to insert anywhere

Tag label

Rounded tag label

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

Tag with icon

<template>
    <section>
        <b-field>
            <b-tag icon="account-check-outline">Tag with icon</b-tag>
        </b-field>
    </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

Colored closable tag label with colored closed icon

Attached closable tag label

Colored attached closable tag label

Attached tag label with colored close type

Attached tag label with custom and colored icon

<template>
    <section>
        <b-field>
            <b-tag v-if="isTag1Active"
                type="is-primary"
                closable
                aria-close-label="Close tag"
                @close="isTag1Active = false">
                Colored closable tag label
            </b-tag>
        </b-field>
        <b-field>
            <b-tag v-if="isTag2Active"
                type="is-success"
                closable
                closeType='is-danger'
                aria-close-label="Close tag"
                @close="isTag2Active = false">
                Colored closable tag label with colored closed icon
            </b-tag>
        </b-field>

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

        <b-field>
            <b-tag v-if="isTag4Active"
                type="is-danger"
                attached
                closable
                aria-close-label="Close tag"
                @close="isTag4Active = false">
                Colored attached closable tag label
            </b-tag>
        </b-field>
        <b-field>
            <b-tag v-if="isTag5Active"
                close-type='is-danger'
                attached
                closable
                aria-close-label="Close tag"
                @close="isTag5Active = false">
                Attached tag label with colored close type
            </b-tag>
        </b-field>
        <b-field>
            <b-tag v-if="isTag6Active"
                close-type='is-warning'
                close-icon-type='is-dark'
                attached
                closable
                close-icon='delete'
                aria-close-label="Close tag"
                @close="isTag6Active = false">
                Attached tag label with custom and colored icon
            </b-tag>
        </b-field>
    </section>
</template>

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

FirstSecondThirdFourthFifth

<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.

npm0.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.

npm0.5.1

downloads15k

chaton 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 and types

Two additional sizes. Many colors with light variant.

DefaultMediumLarge

PrimaryLight primarySuccessLight successDangerLight dangerWarningLight warningInfoLight infoLinkLight link
LightDark

<template>
    <section>
        <b-taglist>
            <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>
        </b-taglist>

        <b-taglist>
            <b-tag type="is-primary">Primary</b-tag>
            <b-tag type="is-primary is-light">Light primary</b-tag>

            <b-tag type="is-success">Success</b-tag>
            <b-tag type="is-success is-light">Light success</b-tag>

            <b-tag type="is-danger">Danger</b-tag>
            <b-tag type="is-danger is-light">Light danger</b-tag>

            <b-tag type="is-warning">Warning</b-tag>
            <b-tag type="is-warning is-light">Light warning</b-tag>

            <b-tag type="is-info">Info</b-tag>
            <b-tag type="is-info is-light">Light info</b-tag>

            <b-tag type="is-link">Link</b-tag>
            <b-tag type="is-link is-light">Light link</b-tag>

            <br />
            <b-tag type="is-light">Light</b-tag>

            <b-tag type="is-dark">Dark</b-tag>
        </b-taglist>
    </section>
</template>

# API

Tag

Name	Description	Type	Values	Default
`type`	Type (color) of the tag, 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	—
`close-type`	Type (color) of the cross button of tag, 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 tag, 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	—	-
`icon`	Adds an icon to the left of the tag.	String	—	-
`icon-pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fab`, `fad`, `fal`	`mdi`
`icon-type`	Type (color) of the icon on the left side of tag, 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	—
`close-icon`	Replace times in close button with a customized icon. `closable` and `attached` props should be needed.	String	—	-
`close-icon-pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fab`, `fad`, `fal`	`mdi`
`close-icon-type`	Type (color) of the close icon of tag, 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	—

Name	Description	Parameters
`close`	Triggers when close/delete button is clicked or delete key is pressed	—
`click`	Triggers when clicking the content of the tag	—

Taglist

Name	Description	Type	Values	Default
`attached`	Tags inside are attached together	Boolean	—	`false`

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

Improve this page on GitHub