Chip
#

Chip - it is a compact element for displaying data or performing an action.

Examples
#

Default
#

Default usage of the va-chip component.

default
Open in GitHub

Outline
#

Outline style without background.

outline chip
Open in GitHub

Flat
#

Flat style without borders and background.

flat chip
Open in GitHub

Square
#

Makes your va-chip square.

square
Open in GitHub

Color
#

You can use the va-chip component with different colors.

primarydangersuccesswarning#7f1f90
Open in GitHub

Size
#

Set different tag sizes using size presets.

small size medium size large size
Open in GitHub

Icon
#

You can use icons in tag.

faceemailthumb_upinforemove without icon
Open in GitHub

Closeable
#

A tag can be closed by applying the closeable property.

closeable chip close
Open in GitHub

Link
#

It makes your tag clickable.

Open in GitHub

Shadow
#

You can set a shadow.

chip with shadow
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
activeClass

String

-

append

Boolean

-

ariaCloseLabel

String

"$t:close"

closeable

Boolean

false

color

String

""

disabled

Boolean

false

exact

Boolean

-

exactActiveClass

String

-

flat

Boolean

false

href

String

-

icon

String

""

modelValue

Boolean

true

outline

Boolean

false

preset

String

-

readonly

Boolean

false

replace

Boolean

-

shadow

Boolean

false

size

String

"medium"

square

Boolean

false

stateful

Boolean

false

tag

String

"span"

target

String

-

to

String | Object

-

Events #

NameDescription

focus

On focus.

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model

Css Variables #

NameDefault Value
--va-chip-display inline-flex
--va-chip-border 0.125rem solid transparent
--va-chip-position relative
--va-chip-border-radius 2rem
--va-chip-width auto
--va-chip-height auto
--va-chip-min-width initial
--va-chip-min-height initial
--va-chip-padding 0 0.3rem
--va-chip-color #ffffff
--va-chip-cursor default
--va-chip-font-size 1rem
--va-chip-vertical-align middle
--va-chip-inner-display inline-flex
--va-chip-inner-align-items center
--va-chip-inner-width 100%
--va-chip-hover-opacity 0.85
--va-chip-content-display flex
--va-chip-content-width var(--va-chip-inner-width, 100%)
--va-chip-content-align-items center
--va-chip-content-justify-content center
--va-chip-content-padding 0 0.3rem
--va-chip-content-line-height 1.6
--va-chip-square-border-radius 0.2rem
--va-chip-sm-height 1.5rem
--va-chip-sm-font-size 0.875rem
--va-chip-lg-height 2.5rem
--va-chip-lg-font-size 1.25rem