Alert

Alert presents feedback or important information to users.

Examples

import { Alert } from "@seduo/design-system";
...
<Alert color="success" iconName="check-circle-filled">Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a></Alert>
...
<Alert color="danger" iconName="alert-triangle-filled">Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a></Alert>
...
<Alert color="warning" iconName="alert-triangle-filled">Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a></Alert>
...
<Alert color="informative" iconName="info-filled">Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a></Alert>

{% embed "@seduo-design-system/alert.twig" with { props: {
    color: 'success',
    iconName: 'check-circle-filled'
}} %}
    {% block content %}
        Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a>
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/alert.twig" with { props: {
    color: 'danger',
    iconName: 'AlertTriangleFilled'
}} %}
    {% block content %}
        Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a>
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/alert.twig" with { props: {
    color: 'warning',
    iconName: 'AlertTriangleFilled'
}} %}
    {% block content %}
        Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a>
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/alert.twig" with { props: {
    color: 'informative',
    iconName: 'InfoFilled'
}} %}
    {% block content %}
        Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a>
    {% endblock %}
{% endembed %}

<Alert color="success" iconName="check-circle-filled">Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a></Alert>
...
<Alert color="danger" iconName="alert-triangle-filled">Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a></Alert>
...
<Alert color="warning" iconName="alert-triangle-filled">Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a></Alert>
...
<Alert color="informative" iconName="InfoFilled">Hey! <strong>Pay</strong> attention! <a href="#">Click Here</a></Alert>

API

Prop name	Type	Default	Required	Description
`color`	Emotion Color dictionary	`success`	no	Color of the component
`iconName`	`string`	Based on `color`	no	Icon used in Alert
`isCentered`	`bool`	`false`	no	If true, Alert is centered
`UNSAFE_className`	`string`	-	no	Wrapper custom class name

Uncontrolled

And if you are not a fan of using state, you can always use UncontrolledAlert.

examples

import { UncontrolledAlert } from "@seduo/design-system";
...
<UncontrolledAlert color="success" iconName="check-circle-filled" visibilityTimeout={5000} fade={true}>Hey! <strong>Success</strong> with fade and visibility timeout in 5 seconds</UncontrolledAlert>
...
<UncontrolledAlert color="danger" iconName="alert-triangle-filled" visibilityTimeout={7000} fade={true}>Hey! <strong>Danger</strong> with fade and visibility timeout in 7 seconds</UncontrolledAlert>
...
<UncontrolledAlert color="warning" iconName="alert-triangle-filled" visibilityTimeout={9000} fade={true}>Hey! <strong>Warning</strong> with fade and visibility timeout in 9seconds</UncontrolledAlert>
...
<UncontrolledAlert color="informative" iconName="info-filled" visibilityTimeout={11000}>Hey! <strong>Info</strong> without fade and visibility timeout in 11 seconds</UncontrolledAlert>

<UncontrolledAlert color="success" iconName="check-circle-filled" visibilityTimeout={5000} fade={true}>Hey! <strong>Success</strong> with fade and visibility timeout in 5 seconds</UncontrolledAlert>
...
<UncontrolledAlert color="danger" iconName="alert-triangle-filled" visibilityTimeout={7000} fade={true}>Hey! <strong>Danger</strong> with fade and visibility timeout in 7 seconds</UncontrolledAlert>
...
<UncontrolledAlert color="warning" iconName="alert-triangle-filled" visibilityTimeout={9000} fade={true}>Hey! <strong>Warning</strong> with fade and visibility timeout in 9seconds</UncontrolledAlert>
...
<UncontrolledAlert color="informative" iconName="info-filled" visibilityTimeout={11000}>Hey! <strong>Info</strong> without fade and visibility timeout in 11 seconds</UncontrolledAlert>

Extra uncontrolled properties

Prop name	Type	Default	Required	Description
`visibilityTimeout`	`number`	undefined	no	After which time it will be automatically hidden from view
`fade`	`bool`	`false`	no	Define fade effect will be applied to show and hide
`onAfterClose`	`() => void`	undefined	no	After closing the alert

In twig implementation you need to initialize javascript first

  import { Alert } from '@seduo/design-system/scripts';
  ...
  Array.from(document.querySelectorAll('[data-spirit-toggle="alert"]')).forEach(
      (alertNode) => new Alert(alertNode),
  );

On this page