@props(['tone' => 'gray'])

<span {{ $attributes->class([
    'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold whitespace-nowrap',
    'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300' => $tone === 'gray',
    'bg-green-100 text-green-800 dark:bg-green-500/15 dark:text-green-300' => $tone === 'green',
    'bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-300' => $tone === 'amber',
    'bg-red-100 text-red-800 dark:bg-red-500/15 dark:text-red-300' => $tone === 'red',
    'bg-indigo-100 text-indigo-800 dark:bg-indigo-500/15 dark:text-indigo-300' => $tone === 'blue',
]) }}>{{ $slot }}</span>