Badges

import { Badge } from "$components/badge.component";

export function DefaultBadgeExample() {
	return (
		<>
			<Badge text="Pill" />
			<Badge type="square" text="#Square" />
			<Badge text="Outlined" variant="outlined" />
			<Badge text="Inversed" variant="inversed" />
		</>
	);
}

import { PrimaryBadge } from "$components/badge.component";

export function PrimaryBadgeExample() {
	return (
		<>
			<PrimaryBadge text="Primary" />
			<PrimaryBadge type="square" text="#Square" />
			<PrimaryBadge text="Outlined" variant="outlined" />
			<PrimaryBadge text="Inversed" variant="inversed" />
		</>
	);
}

import { SecondaryBadge } from "$components/badge.component";

export function SecondaryBadgeExample() {
	return (
		<>
			<SecondaryBadge text="Secondary" />
			<SecondaryBadge type="square" text="#Square" />
			<SecondaryBadge text="Outlined" variant="outlined" />
			<SecondaryBadge text="Inversed" variant="inversed" />
		</>
	);
}

import { SuccessBadge } from "$components/badge.component";

export function SuccessBadgeExample() {
	return (
		<>
			<SuccessBadge text="Success" />
			<SuccessBadge type="square" text="#Square" />
			<SuccessBadge text="Outlined" variant="outlined" />
			<SuccessBadge text="Inversed" variant="inversed" />
		</>
	);
}

import { DangerBadge } from "$components/badge.component";

export function DangerBadgeExample() {
	return (
		<>
			<DangerBadge text="Danger" />
			<DangerBadge type="square" text="#Square" />
			<DangerBadge text="Outlined" variant="outlined" />
			<DangerBadge text="Inversed" variant="inversed" />
		</>
	);
}

import { InfoBadge } from "$components/badge.component";

export function InfoBadgeExample() {
	return (
		<>
			<InfoBadge text="Info" />
			<InfoBadge type="square" text="#Square" />
			<InfoBadge text="Outlined" variant="outlined" />
			<InfoBadge text="Inversed" variant="inversed" />
		</>
	);
}

import { WarningBadge } from "$components/badge.component";

export function WarningBadgeExample() {
	return (
		<>
			<WarningBadge text="Warning" />
			<WarningBadge type="square" text="#Square" />
			<WarningBadge text="Outlined" variant="outlined" />
			<WarningBadge text="Inversed" variant="inversed" />
		</>
	);
}