PubBadge

This is a badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.

Default badges

Prop - theme Usage

The theme prop can be used to change the color of the badge.

DefaultBlueRedGreenYellowMagentaCyanLightDark

<template>
    <pub-badge theme="default">Default</pub-badge>
    <pub-badge theme="blue">Blue</pub-badge>
    <pub-badge theme="red">Red</pub-badge>
    <pub-badge theme="green">Green</pub-badge>
    <pub-badge theme="yellow">Yellow</pub-badge>
    <pub-badge theme="magenta">Magenta</pub-badge>
    <pub-badge theme="cyan">Cyan</pub-badge>
    <pub-badge theme="light">Light</pub-badge>
    <pub-badge theme="dark">Dark</pub-badge>
</template>

<script setup>
import { PubBadge } from "vuelicity";
</script>

Large badges

Prop - size Usage

The size prop can be used to change the size of the badge.

Extra SmallSmallMedium

<template>
    <pub-badge size="xs">Extra Small</pub-badge>  
    <pub-badge size="sm">Small</pub-badge>  
    <pub-badge size="md">Medium</pub-badge>
</template>

<script setup>
import { PubBadge } from "vuelicity";
</script>

Bordered badges

Prop - bordered Usage

The bordered prop can be used to add a border to the badge.

DefaultBlueRedGreenYellowMagentaCyanLightDark

<template>
    <pub-badge bordered>Default</pub-badge>
    <pub-badge theme="blue" bordered>Blue</pub-badge>
    <pub-badge theme="red" bordered>Red</pub-badge>
    <pub-badge theme="green" bordered>Green</pub-badge>
    <pub-badge theme="yellow" bordered>Yellow</pub-badge>
    <pub-badge theme="magenta" bordered>Magenta</pub-badge>
    <pub-badge theme="cyan" bordered>Cyan</pub-badge>
    <pub-badge theme="light" bordered>Light</pub-badge>
    <pub-badge theme="dark" bordered>Dark</pub-badge>
</template>

<script setup>
import { PubBadge } from "vuelicity";
</script>

Rounded badges

Prop - rounded Usage

The rounded prop can be used to add rounded corners to the badge.

DefaultBlueRedGreenYellowMagentaCyanLightDark

<template>
    <pub-badge rounded>Default</pub-badge>
    <pub-badge theme="blue" rounded>Blue</pub-badge>
    <pub-badge theme="red" rounded>Red</pub-badge>
    <pub-badge theme="green" rounded>Green</pub-badge>
    <pub-badge theme="yellow" rounded>Yellow</pub-badge>
    <pub-badge theme="magenta" rounded>Magenta</pub-badge>
    <pub-badge theme="cyan" rounded>Cyan</pub-badge>
    <pub-badge theme="light" rounded>Light</pub-badge>
    <pub-badge theme="dark" rounded>Dark</pub-badge>
</template>

<script setup>
import { PubBadge } from "vuelicity";
</script>

Badges as links

Prop - href Usage

The href prop can be used to make the badge a link.

DefaultBlueRedGreenYellowMagentaCyanLightDark

<template>
    <pub-badge href="#">Default</pub-badge>
    <pub-badge theme="blue" href="#">Blue</pub-badge>
    <pub-badge theme="red" href="#">Red</pub-badge>
    <pub-badge theme="green" href="#">Green</pub-badge>
    <pub-badge theme="yellow" href="#">Yellow</pub-badge>
    <pub-badge theme="magenta" href="#">Magenta</pub-badge>
    <pub-badge theme="cyan" href="#">Cyan</pub-badge>
    <pub-badge theme="light" href="#">Light</pub-badge>
    <pub-badge theme="dark" href="#">Dark</pub-badge>
</template>

<script setup>
import { PubBadge } from "vuelicity";
</script>

Badges with icons

Slot - icon Usage

The icon slot can be used to add an icon to the badge.

Light Dark

<template>
    <pub-badge theme="light">
        <template #icon>
            <pub-icon name="sun" size="xs" />
        </template>
        Light
    </pub-badge>
    <pub-badge theme="dark">
        <template #icon>
            <pub-icon name="moon" type="outline" size="xs" />
        </template>
        Dark
    </pub-badge>
</template>

<script setup>
import { PubBadge, PubIcon } from "vuelicity";
</script>

Badges with only icon

<template>
    <pub-badge theme="blue">
        <template #icon>
            <pub-icon name="sun" />
        </template>
    </pub-badge>
    <pub-badge theme="dark">
        <template #icon>
            <pub-icon name="sun" size="xs" />
        </template>
    </pub-badge>
</template>

<script setup>
import { PubBadge, PubIcon } from "vuelicity";
</script>

Reference

Properties

Name	Type	Default	Description	Options
theme	String	'default'	The color theme of the badge.	'default', 'blue', 'red', 'yellow', 'green', 'magenta', 'cyan', 'light', 'dark'
size	String	'xs'	The size of the badge.	'xs', 'sm', 'md'
href	String	null	The URL to link to. If provided, the badge renders as an anchor tag.
bordered	Boolean	false	Whether to add a border to the badge.
rounded	Boolean	false	Whether to add rounded corners to the badge.

Slots

Name	Description
default	The content of the badge.
icon	Slot for an icon.