Files
Musify/web-player/src/lib/components/ui/media/StatusBadge.svelte
T
Admin ebe9769d4e Align library styles with the design system
Use type recipes and Button danger variant, add danger tint, dropzone and cover-fill tokens, give SearchInput a size prop so the top bar keeps its larger search, show queue details inline on mobile, derive upload limits from constants and document the card hover style.
2026-09-25 01:20:32 +02:00

22 lines
487 B
Svelte

<script lang="ts">
interface Props {
label: string;
tone?: 'success' | 'neutral' | 'danger';
class?: string;
}
let { label, tone = 'neutral', class: klass = '' }: Props = $props();
const TONE = {
success: 'bg-accent-tint text-accent-soft',
neutral: 'bg-btn text-fg-2',
danger: 'bg-danger-tint text-danger-fg'
};
</script>
<span
class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium whitespace-nowrap {TONE[
tone
]} {klass}">{label}</span
>