45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
// components/partials/badge/Badge02.tsx
|
|
import React from 'react';
|
|
|
|
const Badge02 = () => {
|
|
return (
|
|
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
|
{/* Primary Badge */}
|
|
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#465fff] px-2.5 py-0.5 text-sm font-medium text-white">
|
|
Primary
|
|
</span>
|
|
|
|
{/* Success Badge */}
|
|
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#12b76a] px-2.5 py-0.5 text-sm font-medium text-white">
|
|
Success
|
|
</span>
|
|
|
|
{/* Error Badge */}
|
|
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f04438] px-2.5 py-0.5 text-sm font-medium text-white">
|
|
Error
|
|
</span>
|
|
|
|
{/* Warning Badge */}
|
|
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f79009] px-2.5 py-0.5 text-sm font-medium text-white">
|
|
Warning
|
|
</span>
|
|
|
|
{/* Info Badge */}
|
|
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#0ba5ec] px-2.5 py-0.5 text-sm font-medium text-white">
|
|
Info
|
|
</span>
|
|
|
|
{/* Light Badge */}
|
|
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#98a2b3] px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white/80">
|
|
Light
|
|
</span>
|
|
|
|
{/* Dark Badge */}
|
|
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#1d2939] px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/15 dark:text-white">
|
|
Dark
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Badge02; |