claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
32 lines • 1.43 kB
TypeScript
type $$ComponentProps = {
variant?: 'default' | 'dot' | 'numeric';
size?: 'sm' | 'md' | 'lg';
color?: 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
count?: number | undefined;
maxCount?: number;
pulse?: boolean;
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | undefined;
class?: string;
children?: import('svelte').Snippet;
};
/**
* Badge
*
* Badge component for displaying counts, status indicators, and labels.
* Follows ADHD-friendly design principles with clear visual hierarchy.
*
* @prop {string} [variant='default'] - Badge variant (default, dot, numeric)
* @prop {string} [size='md'] - Badge size (sm, md, lg)
* @prop {string} [color='accent'] - Badge color (accent, success, warning, error, info, neutral)
* @prop {number} [count] - Numeric count to display (for numeric variant)
* @prop {number} [maxCount=99] - Maximum count to display before showing "99+"
* @prop {boolean} [pulse=false] - Whether to show pulse animation
* @prop {string} [position] - Position relative to parent (top-right, top-left, bottom-right, bottom-left)
* @prop {string} [className] - Additional CSS classes
*
* @slot default - Badge content (for default variant)
*/
declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
type Badge = ReturnType<typeof Badge>;
export default Badge;
//# sourceMappingURL=Badge.svelte.d.ts.map