# Scope Notification

## **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.