stdf/docs/mds/components/alert/guide_en.md

Use Cases

Alert component displays card-style popup notifications, suitable for scenarios requiring richer content presentation, such as operation feedback and system notifications.

Design Philosophy and Use Case Differences

In STDF, Toast, Alert, Modal, and Dialog all provide user feedback, but they emphasize different interaction levels.

• Toast: Lightweight, non-blocking, focused on short status feedback for quick actions.
• Alert: Card-style notification emphasizing content readability, suitable for richer notices with title, icon, or actions.
• Modal: Strong awareness with minimal interaction, often a single confirm or acknowledgment.
• Dialog: Strong awareness with decision-making, usually primary/secondary actions for confirmations or risky flows.

Alert Types

Set different alert types via type property:

• 'success': Success alert with green icon
• 'error': Error alert with red icon
• 'warning': Warning alert with orange icon
• 'info': Info alert with blue icon
• null: No type, no default icon displayed

Display Position

By default slides in from the top. Set position to 'bottom' to slide in from the bottom. Adjust distance from top/bottom via py property.

Auto Close

Automatically closes after 3 seconds by default. Adjust display duration via duration property. Set to 0 to disable auto close and require manual closing.

Transition Animation

Set transition animation via transitionType property, supports all svelte/transition functions applicable to regular DOM elements:

• 'fly': Fly-in animation (default), slides in from top/bottom
• 'scale': Scale animation
• 'fade': Fade-in animation
• 'slide': Slide animation
• 'blur': Blur animation
• null: No animation

Animation Parameters

Set animation parameters via transitionParams property, where duration represents the enter animation duration (default 300ms).

For supported parameters in transitionParams, please refer to svelte/transition.

For example, you can customize the Y value for fly animation:

<Alert transitionType="fly" transitionParams={{ y: 200, delay: 100 }} />

For better user experience, the alert appears with a short animation (default 300ms) to catch user attention. You can set the exit animation duration via outDuration property (default 300ms).

Exit animation only allows setting the duration. Other parameters will inherit from the enter animation to ensure the animation effect "goes back to where it came from".

Easing Functions

Set the easing function for enter animation via easeType property, and easeOutType for exit animation. Supports all svelte/easing easing functions:

• 'linear': Linear
• 'cubicOut': Cubic ease-out (default)
• 'bounceOut': Bounce ease-out
• 'elasticOut': Elastic ease-out
• 'backOut': Back ease-out
• For more easing functions, refer to svelte/easing documentation

For example, using elastic easing effect:

<Alert easeType="elasticOut" easeOutType="elasticOut" />

Custom Card Style

Pass Card component configuration via card property to customize shadow, radius, border, and other styles.

Custom Content

Use children Snippet to fully customize alert content for more complex interactions.

Click-through

Click-through is enabled by default (clickable is true), meaning content below can be clicked while the alert is displayed. Set to false to prevent click-through.

injClass

Inject CSS class names to the component's outer container via injClass parameter.

If the injected class doesn't take effect, add "!" before the class name. Refer to Tailwind Important modifier.