atlas/packages/svelte/src/lib/components/DataDisplay/Badge.svelte
Benjamin Palko c001cc4907 update-to-daisui-5.0 (#1)
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com>
Reviewed-on: #1
2025-03-27 13:19:01 -04:00

40 lines
No EOL
1.1 KiB
Svelte

<script lang="ts" module>
export type BadgeStyle = 'outline' | 'dash' | 'soft' | 'ghost';
</script>
<script lang="ts">
import type { DaisyColor, DaisySize } from '$lib/types';
import type { Snippet } from 'svelte';
type Props = {
children: Snippet;
color?: DaisyColor;
size?: DaisySize;
style?: BadgeStyle;
};
let { children, color, size, style }: Props = $props();
</script>
<span
class="badge"
class:badge-primary={color === 'primary'}
class:badge-secondary={color === 'secondary'}
class:badge-accent={color === 'accent'}
class:badge-neutral={color === 'neutral'}
class:badge-info={color === 'info'}
class:badge-success={color === 'success'}
class:badge-warning={color === 'warning'}
class:badge-error={color === 'error'}
class:badge-xs={size === 'xs'}
class:badge-sm={size === 'sm'}
class:badge-md={size === 'md'}
class:badge-lg={size === 'lg'}
class:badge-xl={size === 'xl'}
class:badge-outline={style === 'outline'}
class:badge-dash={style === 'dash'}
class:badge-soft={style === 'soft'}
class:badge-ghost={style === 'ghost'}
>
{@render children?.()}
</span>