alert
alert
ts
export default {
slots: {
root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
wrapper: 'min-w-0 flex-1 flex flex-col',
title: 'text-sm font-medium',
description: 'text-sm opacity-90',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xl',
actions: 'flex flex-wrap gap-1.5 shrink-0',
close: 'p-0',
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: '',
},
orientation: {
horizontal: {
root: 'items-center',
actions: 'items-center',
},
vertical: {
root: 'items-start',
actions: 'items-start mt-2.5',
},
},
title: {
true: {
description: 'mt-1',
},
},
},
compoundVariants: [
{
color: 'primary',
variant: 'solid',
class: {
root: 'bg-primary text-inverted',
},
} as const,
{
color: 'primary',
variant: 'outline',
class: {
root: 'text-primary ring ring-inset ring-primary/25',
},
} as const,
{
color: 'primary',
variant: 'soft',
class: {
root: 'bg-primary/10 text-primary',
},
} as const,
{
color: 'primary',
variant: 'subtle',
class: {
root: 'bg-primary/10 text-primary ring ring-inset ring-primary/25',
},
} as const,
{
color: 'secondary',
variant: 'solid',
class: { root: 'bg-secondary text-inverted' },
} as const,
{
color: 'secondary',
variant: 'outline',
class: { root: 'text-secondary ring ring-inset ring-secondary/25' },
} as const,
{
color: 'secondary',
variant: 'soft',
class: { root: 'bg-secondary/10 text-secondary' },
} as const,
{
color: 'secondary',
variant: 'subtle',
class: { root: 'bg-secondary/10 text-secondary ring ring-inset ring-secondary/25' },
} as const,
{
color: 'success',
variant: 'solid',
class: { root: 'bg-success text-inverted' },
} as const,
{
color: 'success',
variant: 'outline',
class: { root: 'text-success ring ring-inset ring-success/25' },
} as const,
{
color: 'success',
variant: 'soft',
class: { root: 'bg-success/10 text-success' },
} as const,
{
color: 'success',
variant: 'subtle',
class: { root: 'bg-success/10 text-success ring ring-inset ring-success/25' },
} as const,
{
color: 'info',
variant: 'solid',
class: { root: 'bg-info text-inverted' },
} as const,
{
color: 'info',
variant: 'outline',
class: { root: 'text-info ring ring-inset ring-info/25' },
} as const,
{
color: 'info',
variant: 'soft',
class: { root: 'bg-info/10 text-info' },
} as const,
{
color: 'info',
variant: 'subtle',
class: { root: 'bg-info/10 text-info ring ring-inset ring-info/25' },
} as const,
{
color: 'warning',
variant: 'solid',
class: { root: 'bg-warning text-inverted' },
} as const,
{
color: 'warning',
variant: 'outline',
class: { root: 'text-warning ring ring-inset ring-warning/25' },
} as const,
{
color: 'warning',
variant: 'soft',
class: { root: 'bg-warning/10 text-warning' },
} as const,
{
color: 'warning',
variant: 'subtle',
class: { root: 'bg-warning/10 text-warning ring ring-inset ring-warning/25' },
} as const,
{
color: 'error',
variant: 'solid',
class: { root: 'bg-error text-inverted' },
} as const,
{
color: 'error',
variant: 'outline',
class: { root: 'text-error ring ring-inset ring-error/25' },
} as const,
{
color: 'error',
variant: 'soft',
class: { root: 'bg-error/10 text-error' },
} as const,
{
color: 'error',
variant: 'subtle',
class: { root: 'bg-error/10 text-error ring ring-inset ring-error/25' },
} as const,
{
color: 'neutral',
variant: 'solid',
class: {
root: 'text-inverted bg-inverted',
},
} as const,
{
color: 'neutral',
variant: 'outline',
class: {
root: 'text-highlighted bg-default ring ring-inset ring-default',
},
} as const,
{
color: 'neutral',
variant: 'soft',
class: {
root: 'text-highlighted bg-elevated/50',
},
} as const,
{
color: 'neutral',
variant: 'subtle',
class: {
root: 'text-highlighted bg-elevated/50 ring ring-inset ring-accented',
},
} as const,
],
defaultVariants: {
color: 'primary',
variant: 'solid',
} as const,
}ts
export default {
slots: {
root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
wrapper: 'min-w-0 flex-1 flex flex-col',
title: 'text-sm font-medium',
description: 'text-sm opacity-90',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xl',
actions: 'flex flex-wrap gap-1.5 shrink-0',
close: 'p-0',
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: '',
},
orientation: {
horizontal: {
root: 'items-center',
actions: 'items-center',
},
vertical: {
root: 'items-start',
actions: 'items-start mt-2.5',
},
},
title: {
true: {
description: 'mt-1',
},
},
},
compoundVariants: [
{
color: 'primary',
variant: 'solid',
class: {
root: 'bg-primary text-inverted',
},
} as const,
{
color: 'primary',
variant: 'outline',
class: {
root: 'text-primary ring ring-inset ring-primary/25',
},
} as const,
{
color: 'primary',
variant: 'soft',
class: {
root: 'bg-primary/10 text-primary',
},
} as const,
{
color: 'primary',
variant: 'subtle',
class: {
root: 'bg-primary/10 text-primary ring ring-inset ring-primary/25',
},
} as const,
{
color: 'secondary',
variant: 'solid',
class: { root: 'bg-secondary text-inverted' },
} as const,
{
color: 'secondary',
variant: 'outline',
class: { root: 'text-secondary ring ring-inset ring-secondary/25' },
} as const,
{
color: 'secondary',
variant: 'soft',
class: { root: 'bg-secondary/10 text-secondary' },
} as const,
{
color: 'secondary',
variant: 'subtle',
class: { root: 'bg-secondary/10 text-secondary ring ring-inset ring-secondary/25' },
} as const,
{
color: 'success',
variant: 'solid',
class: { root: 'bg-success text-inverted' },
} as const,
{
color: 'success',
variant: 'outline',
class: { root: 'text-success ring ring-inset ring-success/25' },
} as const,
{
color: 'success',
variant: 'soft',
class: { root: 'bg-success/10 text-success' },
} as const,
{
color: 'success',
variant: 'subtle',
class: { root: 'bg-success/10 text-success ring ring-inset ring-success/25' },
} as const,
{
color: 'info',
variant: 'solid',
class: { root: 'bg-info text-inverted' },
} as const,
{
color: 'info',
variant: 'outline',
class: { root: 'text-info ring ring-inset ring-info/25' },
} as const,
{
color: 'info',
variant: 'soft',
class: { root: 'bg-info/10 text-info' },
} as const,
{
color: 'info',
variant: 'subtle',
class: { root: 'bg-info/10 text-info ring ring-inset ring-info/25' },
} as const,
{
color: 'warning',
variant: 'solid',
class: { root: 'bg-warning text-inverted' },
} as const,
{
color: 'warning',
variant: 'outline',
class: { root: 'text-warning ring ring-inset ring-warning/25' },
} as const,
{
color: 'warning',
variant: 'soft',
class: { root: 'bg-warning/10 text-warning' },
} as const,
{
color: 'warning',
variant: 'subtle',
class: { root: 'bg-warning/10 text-warning ring ring-inset ring-warning/25' },
} as const,
{
color: 'error',
variant: 'solid',
class: { root: 'bg-error text-inverted' },
} as const,
{
color: 'error',
variant: 'outline',
class: { root: 'text-error ring ring-inset ring-error/25' },
} as const,
{
color: 'error',
variant: 'soft',
class: { root: 'bg-error/10 text-error' },
} as const,
{
color: 'error',
variant: 'subtle',
class: { root: 'bg-error/10 text-error ring ring-inset ring-error/25' },
} as const,
{
color: 'neutral',
variant: 'solid',
class: {
root: 'text-inverted bg-inverted',
},
} as const,
{
color: 'neutral',
variant: 'outline',
class: {
root: 'text-highlighted bg-default ring ring-inset ring-default',
},
} as const,
{
color: 'neutral',
variant: 'soft',
class: {
root: 'text-highlighted bg-elevated/50',
},
} as const,
{
color: 'neutral',
variant: 'subtle',
class: {
root: 'text-highlighted bg-elevated/50 ring ring-inset ring-accented',
},
} as const,
],
defaultVariants: {
color: 'primary',
variant: 'solid',
} as const,
}