Luaris Framework

Appearance

Badge ​

The Badge component is a versatile UI element used to display small pieces of information, such as counts, statuses, or labels. It can be used in various contexts, such as indicating the number of notifications, showing the status of an item, or categorizing content.

Settings ​

The Badge component accepts several props to customize its appearance and behavior:

PropTypeDefaultDescription
variantTColoursprimaryThe visual style of the badge.
sizeTSizesmdThe size of the badge.
labelstring?undefinedThe text label of the badge, optional, can use default slot instead.

Variants ​

Primary Secondary Accent Info Success Warning Danger White Black Transparent
Show code
html
<LxFlex wrap>
	<LxBadge variant="primary">Primary</LxBadge>
	<LxBadge variant="secondary">Secondary</LxBadge>
	<LxBadge variant="accent">Accent</LxBadge>
	<LxBadge variant="info">Info</LxBadge>
	<LxBadge variant="success">Success</LxBadge>
	<LxBadge variant="warning">Warning</LxBadge>
	<LxBadge variant="danger">Danger</LxBadge>
	<LxBadge variant="white">White</LxBadge>
	<LxBadge variant="black">Black</LxBadge>
	<LxBadge variant="transparent">Transparent</LxBadge>
</LxFlex>

Sizes ​

Extra Small Small Medium Large Extra Large 2X Large 3X Large
Show code
html
<LxFlex wrap>
	<LxBadge size="xs">Extra Small</LxBadge>
	<LxBadge size="sm">Small</LxBadge>
	<LxBadge size="md">Medium</LxBadge>
	<LxBadge size="lg">Large</LxBadge>
	<LxBadge size="xl">Extra Large</LxBadge>
	<LxBadge size="2xl">2X Large</LxBadge>
	<LxBadge size="3xl">3X Large</LxBadge>
</LxFlex>

Slots ​

The Badge component does offer a default slot for custom content, allowing you to include icons, text, or any other elements within the badge.

Is Magical?
Show code
html
<LxFlex>
	<LxBadge variant="primary">
		<LxFlex gap="0.5rem" align="center">
			<span>Is Magical?</span>
			<LxIcon name="check" />
		</LxFlex>
	</LxBadge>
</LxFlex>