Badges

<mijnui:badge title="Active" backicon="fa-solid fa-xmark" onClick="console.log('hey')" />
<mijnui:badge color="secondary">
    <svg
        width="12"
        height="12"
        viewBox="0 0 12 12"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
            d="M2 4C2 2.89543 2.89543 2 4 2H8C9.10457 2 10 2.89543 10 4V8C10 9.10457 9.10457 10 8 10H4C2.89543 10 2 9.10457 2 8V4Z"
            fill="currentColor" />
    </svg>
    Draft
    <svg
			width="12"
			height="12"
			viewBox="0 0 12 12"
			fill="none"
			xmlns="http://www.w3.org/2000/svg">
			<path
				d="M9 3L6 6M6 6L3 9M6 6L9 9M6 6L3 3"
				stroke="currentColor"
				stroke-width="1.5"
				stroke-linecap="round"
				stroke-linejoin="round" />
		</svg>
</mijnui:badge>
<mijnui:badge title="Completed" color="success" backicon="fa-solid fa-xmark" />
<mijnui:badge title="In progress" color="warning" backicon="fa-solid fa-xmark" />
<mijnui:badge title="Failed" color="danger" backicon="fa-solid fa-xmark" />

<mijnui:badge variant="outline">Default</mijnui:badge>
<mijnui:badge color="secondary" variant="outline">Secondary</mijnui:badge>
<mijnui:badge color="success" variant="outline">Success</mijnui:badge>
<mijnui:badge color="warning" variant="outline">Warning</mijnui:badge>
<mijnui:badge color="danger" variant="outline">Danger</mijnui:badge>

<mijnui:badge size="xs">Size xs</mijnui:badge>
<mijnui:badge size="sm">Size sm</mijnui:badge>
<mijnui:badge size="md">Size md</mijnui:badge>
<mijnui:badge size="lg">Size lg</mijnui:badge>

<mijnui:badge rounded="full">Rounded full</mijnui:badge>
<mijnui:badge rounded="sm">Rounded sm</mijnui:badge>
<mijnui:badge rounded="md">Rounded md</mijnui:badge>
<mijnui:badge rounded="lg">Rounded lg</mijnui:badge>