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>

# Tag list

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
typeType (color) of the tag, optionalStringis-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-typeType (color) of the cross button of tag, optionalStringis-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
sizeSize of the tag, optionalStringis-medium, is-large
roundedTag border roundedBooleanfalse
closableAdd close/delete button to the tagBooleanfalse
attachedClose/delete button style equal to attached tagsBooleanfalse
ellipsisAdds ellipsis to not overflow the textBooleanfalse
tabstopIf should stop when using tab keyBooleantrue
disabledDisable delete buttonBooleanfalse
aria-close-labelAccessibility label for the close buttonString-
iconAdds an icon to the left of the tag.String-
icon-packIcon pack to useStringmdi, fa, fas, far, fab, fad, falmdi
icon-typeType (color) of the icon on the left side of tag, optionalStringis-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-iconReplace times in close button with a customized icon. closable and attached props should be needed.String-
close-icon-packIcon pack to useStringmdi, fa, fas, far, fab, fad, falmdi
close-icon-typeType (color) of the close icon of tag, optionalStringis-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

Taglist

Name
Description
Type
Values
Default
attachedTags inside are attached togetherBooleanfalse