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

<template>
  <p-dot />
</template>

Colors

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

preview

<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

<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

Props	Type	Default	Description
color	String	-	Dot color variant, valid value is primary, info, success, warning and danger
variant	String	-	Dot style variant, valid value is pills

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
There no event here

See Also

• Badge