Skip to content

Chip

Chips, unlike the buttons that are durable, represent options in a specific context. There are four types, or in actually roles for them:

  • support;
  • filtration;
  • introduction;
  • suggestion.

Props

color
Color from the Tailwind palette
type:String
default:white
values:primary, secondary, warning, info, success, danger
size
Chip size
type:String
default:sm
values:xs, sm
rounded
Decides to round the button
type:Boolean
default:false
outline
Setting an alternative, inverted color arrangement
type:Boolean
default:false
disabled
Inactive chip
type:Boolean
default:false
text
required
Chip text
type:String
default:''
close
Decides about displaying the slot with action
type:Boolean
default:false
icon
Set the true if icons are in the left slot (the appearance of the avatar excludes)
type:Boolean
default:false
avatar
Set the true if the avatar should be found in the left slot (excludes the appearance of the icon)
type:Boolean
default:false

Slots

default
Main slot for actions
left
Left slot for icon or avatar

Examples

Standard, different sizes
xs
sm
html
<chip size="xs" color="primary" text="Chip text" />
html
<chip color="primary" text="Chip text" />
Standard, different colors
primary
secondary
success
info
warning
danger
html
<chip color="primary" text="Chip text" />
html
<chip color="secondary" text="Chip text" />
html
<chip color="success" text="Chip text" />
html
<chip color="info" text="Chip text" />
html
<chip color="warning" text="Chip text" />
html
<chip color="danger" text="Chip text" />
Outline, different colors
primary
secondary
success
info
warning
danger
html
<chip color="primary" text="Chip text" outline />
html
<chip color="secondary" text="Chip text" outline />
html
<chip color="success" text="Chip text" outline />
html
<chip color="info" text="Chip text" outline />
html
<chip color="warning" text="Chip text" outline />
html
<chip color="danger" text="Chip text" outline />
Chips with icons, avatars and closure
html
<chip color="primary" text="Chip 1" icon close>
  <template #left>
    <icon size="full" :icon="home" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip color="primary" text="Chip 2" icon close outline>
  <template #left>
    <icon size="full" :icon="home" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip color="primary" text="Chip 3" avatar close>
  <template #left>
    <avatar size="full" alt="John Doe" square path="/assets/avatars/woman3.jpg" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip color="primary" text="Chip 4" avatar close outline>
  <template #left>
    <avatar size="full" alt="John Doe" square />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip color="primary" text="Chip 5" icon close rounded>
  <template #left>
    <icon size="full" :icon="home" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip color="primary" text="Chip 6" icon close outline rounded>
  <template #left>
    <icon size="full" :icon="home" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip color="primary" text="Chip 7" avatar close rounded>
  <template #left>
    <avatar size="full" alt="John Doe" path="/assets/avatars/woman3.jpg" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip color="primary" text="Chip 8" avatar close outline rounded>
  <template #left>
    <avatar size="full" alt="John Doe" />
  </template>
  <icon size="full" :icon="times" />
</chip>
Small chips with icons, avatars and closure
html
<chip size="xs" color="primary" text="Chip 1" icon close>
  <template #left>
    <icon size="full" :icon="home" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip size="xs" color="primary" text="Chip 2" icon close outline>
  <template #left>
    <icon size="full" :icon="home" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip size="xs" color="primary" text="Chip 3" avatar close>
  <template #left>
    <avatar size="full" alt="John Doe" square path="/assets/avatars/woman3.jpg" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip size="xs" color="primary" text="Chip 4" avatar close outline>
  <template #left>
    <avatar size="full" alt="John Doe" square />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip size="xs" color="primary" text="Chip 5" icon close rounded>
  <template #left>
    <icon size="full" :icon="home" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip size="xs" color="primary" text="Chip 6" icon close outline rounded>
  <template #left>
    <icon size="full" :icon="home" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip size="xs" color="primary" text="Chip 7" avatar close rounded>
  <template #left>
    <avatar size="full" alt="John Doe" path="/assets/avatars/woman3.jpg" />
  </template>
  <icon size="full" :icon="times" />
</chip>
html
<chip size="xs" color="primary" text="Chip 8" avatar close outline rounded>
  <template #left>
    <avatar size="full" alt="John Doe" />
  </template>
  <icon size="full" :icon="times" />
</chip>