Soft
Primary
Danger
Warning
Success
Info
Filled
Primary
Danger
Warning
Success
Info
Outlined
Primary
Danger
Warning
Success
Info
Gradient
Primary
Danger
Warning
Success
Info
<!-- Primary soft -->
<span class="inline-flex px-3 py-1.5 bg-purple-100 text-purple-700 dark:bg-purple-500/50 dark:text-purple-50 text-xs leading-none font-medium boalstehwqbj">Primary</span>
<!-- Danger soft -->
<span class="inline-flex px-3 py-1.5 bg-red-100 text-red-700 dark:bg-red-500/50 dark:text-red-50 text-xs leading-none font-medium boalstehwqbj">Danger</span>
<!-- Warning soft -->
<span class="inline-flex px-3 py-1.5 bg-yellow-100 text-yellow-700 dark:bg-yellow-500/50 dark:text-yellow-50 text-xs leading-none font-medium boalstehwqbj">Warning</span>
<!-- Success soft -->
<span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-50 text-xs leading-none font-medium boalstehwqbj">Success</span>
<!-- Info soft -->
<span class="inline-flex px-3 py-1.5 bg-sky-100 text-sky-700 dark:bg-sky-500/50 dark:text-sky-50 text-xs leading-none font-medium boalstehwqbj">Info</span>
<!-- Primary Filled -->
<span class="inline-flex px-3 py-1.5 bg-purple-700 text-white dark:bg-purple-500 text-xs leading-none font-medium boalstehwqbj">Primary</span>
<!-- Danger Filled -->
<span class="inline-flex px-3 py-1.5 bg-red-700 text-white dark:bg-red-500 text-xs leading-none font-medium boalstehwqbj">Danger</span>
<!-- Warning Filled -->
<span class="inline-flex px-3 py-1.5 bg-yellow-600 text-white dark:bg-yellow-500 text-xs leading-none font-medium boalstehwqbj">Warning</span>
<!-- Success Filled -->
<span class="inline-flex px-3 py-1.5 bg-green-700 text-white dark:bg-green-500 text-xs leading-none font-medium boalstehwqbj">Success</span>
<!-- Info Filled -->
<span class="inline-flex px-3 py-1.5 bg-sky-700 text-white dark:bg-sky-500 text-xs leading-none font-medium boalstehwqbj">Info</span>
<!-- Primary Outlined -->
<span class="inline-flex px-3 py-1.5 border border-purple-700 text-purple-700 dark:border-purple-200 dark:text-purple-200 text-xs leading-none font-medium boalstehwqbj">Primary</span>
<!-- Danger Outlined -->
<span class="inline-flex px-3 py-1.5 border border-red-700 text-red-700 dark:border-red-200 dark:text-red-200 text-xs leading-none font-medium boalstehwqbj">Danger</span>
<!-- Warning Outlined -->
<span class="inline-flex px-3 py-1.5 border border-yellow-700 text-yellow-700 dark:border-yellow-200 dark:text-yellow-200 text-xs leading-none font-medium boalstehwqbj">Warning</span>
<!-- Success Outlined -->
<span class="inline-flex px-3 py-1.5 border border-green-700 text-green-700 dark:border-green-200 dark:text-green-200 text-xs leading-none font-medium boalstehwqbj">Success</span>
<!-- Info Outlined -->
<span class="inline-flex px-3 py-1.5 border border-sky-700 text-sky-700 dark:border-sky-200 dark:text-sky-200 text-xs leading-none font-medium boalstehwqbj">Info</span>
<!-- Primary Gradient -->
<span class="inline-flex px-3 py-1.5 bg-gradient-to-r from-purple-500 to-purple-700 text-white dark:bg-gradient-to-r dark:from-purple-600 dark:to-purple-800 text-xs leading-none font-medium boalstehwqbj">Primary</span>
<!-- Danger Gradient -->
<span class="inline-flex px-3 py-1.5 bg-gradient-to-r from-red-500 to-red-700 text-white dark:bg-gradient-to-r dark:from-red-600 dark:to-red-800 text-xs leading-none font-medium boalstehwqbj">Danger</span>
<!-- Warning Gradient -->
<span class="inline-flex px-3 py-1.5 bg-gradient-to-r from-yellow-500 to-yellow-700 text-white dark:bg-gradient-to-r dark:from-yellow-600 dark:to-yellow-800 text-xs leading-none font-medium boalstehwqbj">Warning</span>
<!-- Success Gradient -->
<span class="inline-flex px-3 py-1.5 bg-gradient-to-r from-green-500 to-green-700 text-white dark:bg-gradient-to-r dark:from-green-600 dark:to-green-800 text-xs leading-none font-medium boalstehwqbj">Success</span>
<!-- Info Gradient -->
<span class="inline-flex px-3 py-1.5 bg-gradient-to-r from-sky-500 to-sky-700 text-white dark:bg-gradient-to-r dark:from-sky-600 dark:to-sky-800 text-xs leading-none font-medium boalstehwqbj">Info</span>
