Menu
Documentation
v4.0.0-beta.4

Chip

BaseChip · A discreet indicator component.

View SourceOpen Issue
vue
<template>
  <BaseChip>
    <BaseButton>
      Button
    </BaseButton>
  </BaseChip>
</template>

Features

  • Absolute or static position
  • Infinite colors
  • Built in pulse animation
  • Offsetting support

Anatomy

This component is a simple wrapper that creates a dot with a pulse animation. You can customize the chip's visual style by using the available props.

vue
<template>
  <BaseChip>
    <!-- Your content here -->
  </BaseChip>
</template>

API Reference

This component has props that you can use to modify its visual style and behavior.

Prop Type
position
default:"absolute"
"absolute" | "static"

The position of the chip

placement
default:"top-end"
"top-end" | "top-start" | "bottom-start" | "bottom-end"

The placement of the chip

offset
default:-
number

The offset of the chip

color
default:"primary"
"primary" | "muted" | "custom"

The color of the chip

size
default:"md"
"md" | "xs" | "sm" | "lg" | "xl"

The size of the chip

pulse
default:-
boolean

Add a pulse animation on the badge

Slot Type
#default
any

Examples

Chip placement

Use the placement prop to change the chip's placement relative to the element it wraps.

vue
<template>
  <BaseChip placement="bottom-end">
    <div />
  </BaseChip>
</template>

Chip offset

Use the offset prop to move the chip from its default position.

vue
<template>
  <BaseChip :offset="6">
    <div />
  </BaseChip>
</template>

Chip colors

Use the color prop to change the chip's color. Set it to custom to use a custom color.

vue
<template>
  <BaseChip color="primary">
    <div />
  </BaseChip>
  <BaseChip color="custom" class="text-yellow-400">
    <div />
  </BaseChip>
</template>

Pulse animation

Use the pulse prop to add a pulse animation to the chip.

vue
<template>
  <BaseChip pulse>
    <div />
  </BaseChip>
</template>

Checkbox

Dropdown