PersonaDot
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
| 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 | ||