Autoclose alerts

Inspect the full details and code of a selected snippet

<div class="uk-alert-primary" uk-alert="timeout: 15000">
        <a href class="uk-alert-close" uk-close></a>
        <p>This alert will close after 15 seconds</p>
      </div>
      <div class="uk-alert-success" uk-alert="timeout: 30000">
        <a href class="uk-alert-close" uk-close></a>
        <p>This alert will close after 30 seconds</p>
      </div>
      <div class="uk-alert-warning" uk-alert="timeout: 45000">
        <a href class="uk-alert-close" uk-close></a>
        <p>This alert will close after 45 seconds</p>
      </div>
      <div class="uk-alert-danger" uk-alert="timeout: 60000">
        <a href class="uk-alert-close" uk-close></a>
        <p>This alert will close after 60 seconds</p>
      </div>

</div>
  </div>
</div>

body { background-color: #e8ebee; }
a:hover { text-decoration: none; }

:root {
  --color-disabled: #d1d5db;
  --color-default: #6b7280;
  --color-default-hover: #4b5563;
  --color-default-active: #374151;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-active: #1d4ed8;
  --color-secondary: #6366f1;
  --color-secondary-hover: #4f46e5;
  --color-secondary-active: #4338ca;
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  --color-success-active: #15803d;
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-active: #b45309;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-active: #b91c1c;
}

.uk-alert {
  color: #ffffff !important;
  background-color: var(--color-default) !important;
}
.uk-alert-primary {
  color: #ffffff !important;
  background-color: var(--color-primary) !important;
}
.uk-alert-secondary {
  color: #ffffff !important;
  background-color: var(--color-secondary) !important;
}
.uk-alert-success {
  color: #ffffff !important;
  background-color: var(--color-success) !important;
}
.uk-alert-warning {
  color: #ffffff !important;
  background-color: var(--color-warning) !important;
}
.uk-alert-danger {
  color: #ffffff !important;
  background-color: var(--color-danger) !important;
}

Information

Detailed overview of a selected code snippet

yaneony

103

20.03.2025, 02:03:35

28.03.2025, 11:01:03

uk-alert, uk-border, uk-card, uk-close, uk-container, uk-flex, uk-margin, uk-padding

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!