Dcode Design System

Alert: Success

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 > 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">
                Message
            </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>
  • 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