Badge

Basic Usage

Welcome. Access Granted.

<script setup>
import { Badge } from '@8ctavio/vergil/components'
</script>

<template>
    <Badge>Welcome. Access Granted.</Badge>
</template>

Props

Label

label: string = ''

MiniMarkup

Text content can be specified through the default slot or the label prop. The slot content overrides the label prop.

<Badge label="Construction ahead. Expect delays."/>

Variant

variant: ('solid' | 'soft' | 'subtle') = 'soft'

Solid

Soft

Subtle

Outline

outline: (boolean | 'subtle' | 'regular' | 'strong')

only for

soft

and

subtle

variants

The 'regular' and true values are equivalent.

Subtle

Regular

Strong

Subtle

Regular

Strong

Icon

icon: string

alias:

icon-left

<Badge icon="rocket_launch"/>

rocket_launch

rocket_launch

rocket_launch

Icon Right

icon-right: string

<Badge label="Omega" icon-right="special_character"/>

Omegaspecial_character

Omegaspecial_character

Omegaspecial_character

Squared

squared: boolean

Squared

Theme

theme: theme = 'brand'

Brand

User

Ok

Info

Warn

Danger

Neutral

Brand

User

Ok

Info

Warn

Danger

Neutral

Brand

User

Ok

Info

Warn

Danger

Neutral

Size

size: ('xs' | 'sm' | 'md' | 'lg' | 'xl') = 'md'

Extra Small

Small

Medium

Large

Extra Large

Radius

radius: ('none' | 'sm' | 'md' | 'lg' | 'full') = 'md'

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Radius

Spacing

spacing: ('compact' | 'expanded') = ''

Compact

Default

Expanded

Compact

Default

Expanded

Compact

Default

Expanded

Compact

Default

Expanded

Compact

Default

Expanded

API Reference

Props

prop	type	default
label	string	''
variant	'soft' | 'outline' | 'solid'	'soft'
outline	boolean | 'subtle' | 'regular' | 'strong'
icon	string
iconLeft	string
iconRight	string
squared	boolean
descendant	boolean
theme	'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral'	'brand'
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
radius	'none' | 'sm' | 'md' | 'lg' | 'full'	'md'
spacing	'' | 'compact' | 'extended'	''

Configuration options

Badge's configuration options allow to overwrite some Badge props' default values and may be overwritten under the badge root-level configuration option.

badge.<option>	type	default	global
variant	'soft' | 'outline' | 'solid'	'soft'
<variant>.outline	boolean | 'subtle' | 'regular' | 'strong'
squared	boolean
theme	theme		✅
size	size		✅
radius	radius		✅
spacing	spacing		✅

Anatomy

<p.badge/>

<Icon.icon/>

<slot name="default"/>

<Icon.icon/>