Badge
Display a short text to represent a status or a category.
Usage
Badge
vue
<template>
<s-badge>Badge</s-badge>
</template>You can also use the label prop:
Badge
vue
<template>
<s-badge label="Badge" />
</template>Style
Use the color and variant props to change the visual style of the Badge.
Badge
vue
<template>
<s-badge color="green" variant="solid" label="Badge" />
</template>Size
Use the size prop to change the size of the Badge.
Badge
vue
<template>
<s-badge size="sm" label="Badge" />
</template>Rounded
To customize the border radius of the Badge, you can use the ui prop.
Badge
vue
<template>
<s-badge :ui="{ rounded: 'rounded-full' }" label="Badge" />
</template>