Dcode Design System

Alert: All Variants

Available classes to modify

  • .border-error-500
  • .bg-error-100
  • text-error-500

We have included four default variants:

  1. Error
  2. Info
  3. Success
  4. Warning

Where to implement

  1. An alert should sit at the top of the page or inside the main content container.

  2. To modify an alert the tailwind classes on the parent div adds the base styling of an alert.

  3. To modify an alert swap out the below classes to get your desired colour from tailwind.config.js

Working example in a page

V1 Figma Updates

<!-- Alert > Error -->
<div class="__alert--error
            border p-smSpace rounded-md space-x-smSpace" role="alert">
    <div class="flex">
        <div class="flex-shrink-0">
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
            </svg>
        </div>
        <div class="ml-3">
            <p class="__alert__heading
                text-sm font-medium">There were 2 errors with your submission</p>
            <div class="__alert__body _alert__body--no_heading
                  text-sm">
                <ul role="list" class="list-disc space-y-1 pl-5">
                    <li>Your password must be at least 8 characters</li>
                    <li>Your password must include at least one pro wrestling finishing move</li>
                </ul>
            </div>
        </div>
        <div class="ml-auto pl-3">
            <div class="-mx-1.5 -my-1.5">
                <button type="button" class="__alert__button
                                    inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2">
                    <span class="sr-only">Dismiss</span>
                    <!-- Heroicon name: mini/x-mark -->
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>
<br />
<!-- Alert > Info Standard -->
<div class="alert alert--info" role="alert">
    <div class="alert__wrapper">
        <div class="alert__left">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="alert__icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
            </svg>
        </div>
        <div class="alert__center">
            <p class="alert__heading alert__heading--info">A new software update is available. See what’s new in version 2.0.4.</p>
            <p class="alert__body alert__body--info">Please check the details for more information ...</p>
        </div>
        <div class="alert__right">
            <div class="alert__button_wrapper">
                <button type="button" class="alert__button alert__button--info">
                    <span class="alert__dismiss">Dismiss</span>
                    <!-- Heroicon name: mini/x-mark -->
                    <svg class="alert__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

<br />

<!-- Alert > Info with Link -->
<div class="alert alert--info" role="alert">
    <div class="alert__wrapper">
        <div class="alert__left">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="alert__icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
            </svg>
        </div>
        <div class="alert__center alert__center--info">
            <p class="alert__body alert__body--info alert__body--no_heading">A new software update is available. See what’s new in version 2.0.4.</p>
            <p class="alert__details_wrapper">
                <a href="#" class="alert__details">
                    Details
                    <span aria-hidden="true"> &rarr;</span>
                </a>
            </p>
        </div>
    </div>
</div>
<br />
<!-- Alert > Success -->
<div class="alert alert--success" role="alert">
    <div class="alert__wrapper">
        <div class="alert__left">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="alert__icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>
        <div class="alert__center">
            <p class="alert__heading alert__heading--success">Order completed</p>
            <div class="alert__body alert__body--success">

            </div>
        </div>
        <div class="alert__right">
            <div class="alert__button_wrapper">
                <button type="button" class="alert__button alert__button--success">
                    <span class="alert__dismiss">Dismiss</span>
                    <!-- Heroicon name: mini/x-mark -->
                    <svg class="alert__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>
<br />
<!-- Alert > Warning -->
<div class="alert alert--warning" role="alert">
    <div class="alert__wrapper">
        <div class="alert__left">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="alert__icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
            </svg>
        </div>
        <div class="alert__center">
            <p class="alert__heading alert__heading--warning">Attention needed</p>
            <p class="alert__body alert__body--warning">Please check the details for more information ...</p>
        </div>
        <div class="alert__right">
            <div class="alert__button_wrapper">
                <button type="button" class="alert__button alert__button--warning">
                    <span class="alert__dismiss">Dismiss</span>
                    <!-- Heroicon name: mini/x-mark -->
                    <svg class="alert__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>
  • Content: 
    .alert {
    @apply border p-smSpace rounded-md space-x-smSpace;

    &--info {
        @apply border-info-500 bg-info-100 text-info-500;
    }

    &--success {
        @apply border-success-500 bg-success-100 text-success-500;
    }

    &--warning {
        @apply border-warning-500 bg-warning-100 text-warning-500;
    }

    &__wrapper {
        @apply flex;
    }

    &__left {
        @apply flex-shrink-0;
    }

    &__icon {
        @apply w-6 h-6;
    }

    &__center {
        @apply ml-3;

        &--info {
            @apply flex-1 md:flex md:justify-between;
        }
    }

    &__heading {
        @apply text-sm font-medium;

        &--info {
            @apply text-info-800;
        }

        &--success {
            @apply text-success-800;
        }

        &--warning {
            @apply text-warning-800;
        }
    }

    &__body {
        @apply mt-2 text-sm;

        &--no_heading {
            @apply mt-0;
        }

        &--info {
            @apply text-info-700;
        }

        &--success {
            @apply text-success-700;
        }

        &--warning {
            @apply text-warning-700;
        }
    }

    &__list {
        @apply list-disc space-y-1 pl-5;
    }

    &__right {
        @apply ml-auto pl-3;
    }

    &__button_wrapper {
        @apply -mx-1.5 -my-1.5;
    }

    &__details_wrapper {
        @apply mt-3 text-sm md:ml-6 md:mt-0;
    }

    &__details {
        @apply whitespace-nowrap font-medium text-info-700 hover:text-info-600;
    }

    &__button {
        @apply inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2;

        &--info {
            @apply bg-info-100 text-info-500 hover:bg-info-100 focus:ring-info-600 focus:ring-offset-info-50;
        }

        &--success {
            @apply bg-success-100 text-success-500 hover:bg-success-100 focus:ring-success-600 focus:ring-offset-success-50;
        }

        &--warning {
            @apply bg-warning-100 text-warning-500 hover:bg-warning-100 focus:ring-warning-600 focus:ring-offset-warning-50;
        }

    }

    &__dismiss {
        @apply sr-only;
    }

    &__close {
        @apply h-5 w-5;
    }
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: components/03-elements/alert/alert.scss
  • Size: 2.2 KB
  • Content: 
    https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJUMg9qwWNHgaiuoDoEgHkn%2Ffractal.dcodegroup.com%3Fnode-id%3D80%253A6512%26t%3DdVycvZF0V0W4lyYO-1
  • URL: /components/raw/alert/figma.txt
  • Filesystem Path: components/03-elements/alert/figma.txt
  • Size: 182 Bytes