Chip

Default

Render simple chips with optional close behavior.

Code copied

<template>
  <div class="center chip-demo">
    <s-chip>Basic Chip</s-chip>
    <s-chip>
      <s-avatar><template #text>LD</template></s-avatar>
      Avatar Text

Tag styles

Choose a presentation with tag-style.

Code copied

<template>
  <div class="chip-styles">
    <s-chip color="primary">Default</s-chip>
    <s-chip color="success" tag-style="outline">Outline</s-chip>
    <s-chip color="danger" tag-style="dashed">Dashed</s-chip>
    <s-chip color="warning" tag-style="mark">Mark</s-chip>
    <s-chip color="primary" tag-style="arrow">Arrow</s-chip>
    <s-chip color="dark" tag-style="flag">Flag</s-chip>
  </div>
</template>

<style scoped lang="scss">
.chip-styles {
  display: flex;
  width: 100%;
  max-width: 620px;
  flex-wrap: wrap;
  gap: 8px;
}
</style>

Round

Use round for pill chips. Arrow remains left-round and right-pointed.

Code copied

<template>
  <div class="chip-round">
    <s-chip color="primary" round>Primary</s-chip>
    <s-chip color="success" tag-style="outline" round>Outline</s-chip>
    <s-chip color="warning" tag-style="mark" round>Marked</s-chip>
    <s-chip color="primary" tag-style="arrow" round>Forward</s-chip>
  </div>
</template>

Size

Use size to fit compact controls or stronger status labels.

Code copied

<template>
  <div class="chip-sizes">
    <s-chip color="primary" size="small">Small</s-chip>
    <s-chip color="primary">Default</s-chip>
    <s-chip color="primary" size="large">Large</s-chip>
  </div>
</template>

Combinations

Combine color, tag style, round, size, and icons after reviewing each property above.

Code copied

<template>
  <div class="chip-combinations">
    <s-chip color="warning" tag-style="mark" round icon="cb:bookmark">
      Release candidate
    </s-chip>
    <s-chip
      color="primary"
      tag-style="arrow"
      round
      size="large"
      icon="cb:play"
    >
      Continue

Color

Color chips using the Sax Design palette or custom values.

Code copied

<template>
  <div class="center chip-demo">
    <s-chip color="primary">Basic Chip</s-chip>
    <s-chip color="success">
      <s-avatar><template #text>LD</template></s-avatar>
      Avatar Text
    </s-chip>
    <s-chip color="danger">

Transparent

Use transparent for a lighter, outlined appearance.

Code copied

<template>
  <div class="center chip-demo">
    <s-chip transparent color="primary">Basic Chip</s-chip>
    <s-chip transparent color="success">
      <s-avatar><template #text>LD</template></s-avatar>
      Avatar Text

Icon

Add a leading icon with the icon prop.

Code copied

<template>
  <div class="center chip-demo">
    <s-chip>
      <s-avatar>
        <s-icon name="cb:user" />
      </s-avatar>

Closable

Remove chips interactively when closable is enabled.

Code copied

<template>
  <div class="center chip-demo">
    <s-button v-if="chips.length === 0" type="filled" @click="reset">
      Reset Chips
    </s-button>

      v-for="chip in chips"
      :key="chip"
      item
      closable
      @click="remove(chip)"
    >
      {{ chip }}

Add and Remove Items

Combine s-chips with multiple s-chip children to add and remove tags.

Code copied

<template>
  <div class="center chips-demo">
    <p class="modelx">{{ chips }}</p>
    <s-chips
      v-model="chips"
      color="rgb(145, 32, 159)"
      placeholder="New Element"
      remove-icon="cb:trash-can"

      <s-chip
        v-for="chip in chips"
        :key="chip"
        item

        close-icon="cb:trash-can"
        @click="remove(chip)"
      >
        {{ chip }}
      </s-chip>
    </s-chips>
  </div>
</template>

API