Skip to content
On this page

Dot

Sub-component used for Badge and Label

Dot is a sub-component used for Badge and Label

Usage

Basic Usage

The default color of dot are black.

preview
vue
<template>
  <p-dot />
</template>

Colors

Dot available in 4 different colors: primary, info, success, warning and danger.

preview
vue
<template>
  <p-dot color="primary" />
  <p-dot color="info" />
  <p-dot color="success" />
  <p-dot color="warning" />
  <p-dot color="danger" />
</template>

Variant

Dot also available with variant pills. When variant is not set, dot will looks as a default

preview
vue
<template>
  <p-dot variant="pills" />
  <p-dot color="primary" variant="pills" />
  <p-dot color="info" variant="pills" />
  <p-dot color="success" variant="pills" />
  <p-dot color="warning" variant="pills" />
  <p-dot color="danger" variant="pills" />
</template>

API

Props

PropsTypeDefaultDescription
colorString-Dot color variant, valid value is primary, info, success, warning and danger
variantString-Dot style variant, valid value is pills

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
There no event here

See Also

Released under the MIT License.