# gds-alert

**Class**: `GdsAlert`

**Tag**: `<gds-alert>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'information' \| 'notice' \| 'positive' \| 'warning' \| 'negative'` | `-` | The variant of the alert, which determines its appearance and icon. |
| `label` | `string` | `-` | The label for the alert, used for accessibility purposes. This needs be set to something relevant to the content of the alert. |
| `role` | `'alert' \| 'status'` | `-` | The role of the alert, which can be 'alert' or 'status'. 'alert' is used for critical messages that require immediate attention, while 'status' is for informational messages. These corresponds to the ARIA roles, which you can read more about on MDN: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role |
| `dismissible` | `boolean` | `-` | The dismissibility of the alert, which determines whether it can be closed by the user. |
| `timeout` | `number` | `-` | The time in milliseconds after which the alert will automatically dismiss itself. Set to 0 to disable auto-dismiss. |
| `buttonLabel` | `string` | `-` | The text for the action button, if provided. If not set, no action button will be rendered. |
| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |


## Events

| Name | Type | Description |
|------|------|-------------|
| `gds-close` | `CustomEvent<any>` | Fired when alert is dismissed |
| `gds-action` | `CustomEvent<any>` | Fired when action button is clicked |


## Slots

| Name | Description |
|------|-------------|
| `(default)` | Alert message content |