Badge

Badges are used to inform user of the status of specific data.

Examples

Variant

Badge can have fill, outline and light variant.

Code

<template>
  <div>
    <base-badge variant="filled">Filled</base-badge>
    <base-badge variant="outlined">Outlined</base-badge>
    <base-badge variant="light">Light</base-badge>
  </div>
</template>

With Dot

Badges can have a dot attached to it.

Code

<template>
  <div>
    <base-badge with-dot variant="filled">Filled</base-badge>
    <base-badge with-dot variant="outlined">Outlined</base-badge>
    <base-badge with-dot variant="light">Light</base-badge>
    <base-badge with-dot color="secondary" variant="filled">Filled</base-badge>
    <base-badge with-dot color="secondary" variant="outlined">Outlined</base-badge>
    <base-badge with-dot color="secondary" variant="light">Light</base-badge>
  </div>
  <div>
    <base-badge with-dot color="info" variant="filled">Filled</base-badge>
    <base-badge with-dot color="info" variant="outlined">Outlined</base-badge>
    <base-badge with-dot color="info" variant="light">Light</base-badge>
    <base-badge with-dot color="success" variant="filled">Filled</base-badge>
    <base-badge with-dot color="success" variant="outlined">Outlined</base-badge>
    <base-badge with-dot color="success" variant="light">Light</base-badge>
  </div>
  <div>
    <base-badge with-dot color="warning" variant="filled">Filled</base-badge>
    <base-badge with-dot color="warning" variant="outlined">Outlined</base-badge>
    <base-badge with-dot color="warning" variant="light">Light</base-badge>
    <base-badge with-dot color="danger" variant="filled">Filled</base-badge>
    <base-badge with-dot color="danger" variant="outlined">Outlined</base-badge>
    <base-badge with-dot color="danger" variant="light">Light</base-badge>
  </div>
</template>

With Icon

Badges can have an icon.

Code

<template>
  <base-badge variant="filled"> Available Books <base-icon icon="i-fad-books" /> </base-badge>
  <base-badge variant="filled" color="success">
    <base-icon icon="i-far-check" /> Success
  </base-badge>
</template>

Badge API

Types

export type BaseBadgeColorType = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'
export type BaseBadgeVariantType = 'fill' | 'light' | 'outline'

Props

Name	Type	Default	Description
variant	BaseBadgeVariantType	fill	Badge variant.
color	BaseBadgeColorType	primary	Badge color.

Slot

#default slot for rendering button content