Alert

<div class="gi-alert-base gi-alert-info" data-testid="alert" role="alert"><span data-testid="govie-icon" role="presentation" class="material-symbols-outlined   gi-block" style="font-size: 24px; font-variation-settings: &quot;FILL&quot; 0, &quot;wght&quot; 400, &quot;GRAD&quot; 0, &quot;opsz&quot; 24;">info</span><div class="gi-alert-container"><p class="gi-alert-title">Info</p><div class="mb-2xl stroke-gray-950"><p class="gi-paragraph-md gi-text-start gi-whitespace-normal ">This is a info Alert</p></div></div></div>

{{ govieAlert({
  "title": "Info",
  "children": "<p>This is a info Alert</p>"
}) }}

import { Alert } from '@govie-ds/react';

<Alert title="Info">
  <Paragraph>This is a info Alert</Paragraph>
</Alert>

<div class="gi-alert-base gi-alert-success" data-testid="alert" role="alert"><span data-testid="govie-icon" role="presentation" class="material-symbols-outlined   gi-block" style="font-size: 24px; font-variation-settings: &quot;FILL&quot; 0, &quot;wght&quot; 400, &quot;GRAD&quot; 0, &quot;opsz&quot; 24;">check_circle</span><div class="gi-alert-container"><p class="gi-alert-title">Success</p><div class="mb-2xl stroke-gray-950"><p class="gi-paragraph-md gi-text-start gi-whitespace-normal ">This is a success Alert</p></div></div></div>

{{ govieAlert({
  "title": "Success",
  "variant": "success",
  "children": "<p>This is a success Alert</p>"
}) }}

import { Alert } from '@govie-ds/react';

<Alert title="Success" variant="success">
  <Paragraph>This is a success Alert</Paragraph>
</Alert>

<div class="gi-alert-base gi-alert-danger" data-testid="alert" role="alert"><span data-testid="govie-icon" role="presentation" class="material-symbols-outlined   gi-block" style="font-size: 24px; font-variation-settings: &quot;FILL&quot; 0, &quot;wght&quot; 400, &quot;GRAD&quot; 0, &quot;opsz&quot; 24;">error</span><div class="gi-alert-container"><p class="gi-alert-title">Error</p><div class="mb-2xl stroke-gray-950"><p class="gi-paragraph-md gi-text-start gi-whitespace-normal ">This is an error Alert</p></div></div></div>

{{ govieAlert({
  "title": "Danger",
  "variant": "danger",
  "children": "<p>This is an error Alert</p>"
}) }}

import { Alert } from '@govie-ds/react';

<Alert title="Error" variant="danger">
  <Paragraph>This is an error Alert</Paragraph>
</Alert>

<div class="gi-alert-base gi-alert-warning" data-testid="alert" role="alert"><span data-testid="govie-icon" role="presentation" class="material-symbols-outlined   gi-block" style="font-size: 24px; font-variation-settings: &quot;FILL&quot; 0, &quot;wght&quot; 400, &quot;GRAD&quot; 0, &quot;opsz&quot; 24;">warning</span><div class="gi-alert-container"><p class="gi-alert-title">Warning</p><div class="mb-2xl stroke-gray-950"><p class="gi-paragraph-md gi-text-start gi-whitespace-normal ">This is a warning Alert</p></div></div></div>

{{ govieAlert({
  "title": "Warning",
  "variant": "warning",
  "children": "<p>This is a warning Alert</p>"
}) }}

import { Alert } from '@govie-ds/react';

<Alert title="Warning" variant="warning">
  <Paragraph>This is a warning Alert</Paragraph>
</Alert>

<div class="gi-alert-base-dismissible gi-alert-info" data-testid="alert" role="alert"><span data-testid="govie-icon" role="presentation" class="material-symbols-outlined   gi-block" style="font-size: 24px; font-variation-settings: &quot;FILL&quot; 0, &quot;wght&quot; 400, &quot;GRAD&quot; 0, &quot;opsz&quot; 24;">info</span><div class="gi-alert-container"><p class="gi-alert-title">Dismissible</p><div class="mb-2xl stroke-gray-950"><p class="gi-paragraph-md gi-text-start gi-whitespace-normal ">This is a Dismissible Alert</p></div></div><button data-testid="govieIconButton-dark-flat-small-undefined" class="gi-btn gi-btn-flat-dark gi-icon-btn-small undefined gi-alert-dismiss"><span data-testid="govie-icon" role="presentation" class="material-symbols-outlined   gi-block" style="font-size: 16px; font-variation-settings: &quot;FILL&quot; 0, &quot;wght&quot; 400, &quot;GRAD&quot; 0, &quot;opsz&quot; 24;">close</span></button></div>

{{ govieAlert({
  "title": "Dismissible",
  "dismissible": true,
  "children": "<p>This is a dismissible Alert</p>"
}) }}

import { Alert } from '@govie-ds/react';

<Alert title="Dismissible" dismissible>
  <Paragraph>This is a dismissible Alert</Paragraph>
</Alert>