Scope Notification

The Avonni Scoped Notification component provides a way to display contextual messages and feedback within your applications. It's like a helpful note that appears to guide or inform users.

Setting Up Your Scoped Notification

Adding Title and Content

• Craft your message:

  • Title: Provide a concise and informative title for your notification.

  • Content Text: Enter the main message you want to convey to the user.

Adding an Icon (Optional)

• Enhance your message with a visual cue:

  • Choose an icon that complements the notification's content and purpose.

Choosing a Variant

• Set the color theme:

  • Base: Neutral gray.

  • Error: Red, for critical messages or errors.

  • Dark: Dark gray, for a more subtle appearance.

  • Success: Green, for positive feedback or successful actions.

  • Warning: Yellow, for cautionary messages or alerts.

Styling Your Scoped Notification

• Fine-tune the appearance:

  • Layout and Spacing:

    • Margin: Control the spacing around the notification to position it correctly.

    • Padding: Adjust the inner spacing to fine-tune the layout and visual comfort.

    • Size: Set a maximum width to maintain a consistent appearance, especially for longer messages.

  • Variant Styles: Customize the colors and styles associated with each variant (base, error, dark, success, warning).

  • Icon Customization: Adjust the icon's size, color, and position.

No Interactions

The Scoped Notification component is primarily a visual element for displaying information, so it has no interactive features or actions.