# Alert Communicates contextual information with a semantic status. ```html ``` ## Attributes | Attribute | Type or allowed values | Default | Description | | --- | --- | --- | --- | | `type` | `primary`, `secondary` | `"primary"` | Controls the visual emphasis. | | `status` | `information`, `warning`, `error`, `success` | `"information"` | Sets the semantic status. | | `size` | `small`, `medium`, `large` | `"medium"` | Controls the alert dimensions and content layout. | | `dismissible` | `boolean` | `false` | Shows a dismiss control. | | `show-icon` | `boolean` | `true` | Shows the semantic status icon. | | `title` | `string` | `""` | Sets the alert title. | | `description` | `string` | None | Sets the description shown by large alerts. | ## Events | Event | Type | Description | | --- | --- | --- | | `noora-dismiss` | `CustomEvent>` | Emitted after the alert is dismissed. | ## Slots | Slot | Description | | --- | --- | | `default` | Rich description content that takes precedence over the description attribute. | | `action` | Actions displayed beside or below the title. | ## Styling parts | Part | Description | | --- | --- | | `alert` | The alert container. | | `title` | The title. | | `description` | The description. | | `actions` | The action container. | A dismiss action emits a `noora-dismiss` event and hides the element. ## Types Use primary alerts by default and secondary alerts for lower emphasis. ```html ``` ## Sizes Choose a compact, standard, or descriptive layout. ```html ``` ## Primary statuses Primary alerts support error, information, success, and warning states. ```html ``` ## Secondary statuses Secondary alerts provide the same semantic states with lower emphasis. ```html ``` ## Dismissible Dismiss controls are available in every alert size. ```html ``` ## Actions Place related actions in the action slot for compact or descriptive alerts. ```html ``` ## Edge cases Long content and combined actions preserve the alert layout. ```html ```