Banners

Alert messages and notifications.

Success Banner

Your changes have been saved successfully. 
<div class="sw-banner sw-banner-success">
  <span class="sw-banner-text">Your changes have been saved.</span>
  <button class="sw-btn sw-btn-ghost sw-btn-sm">Dismiss</button>
</div>

Warning Banner

Your trial expires in 3 days. 
<div class="sw-banner sw-banner-warning">...</div>

Danger Banner

There was an error processing your request. 
<div class="sw-banner sw-banner-danger">...</div>

CSS

.sw-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-space-3);
  padding: var(--sw-space-3) var(--sw-space-4);
  border-radius: var(--sw-radius-lg);
}

.sw-banner-success {
  background: var(--sw-success-bg);
  border: 1px solid var(--sw-success-border);
}

.sw-banner-success .sw-banner-text {
  color: var(--sw-success);
}

.sw-banner-warning {
  background: var(--sw-warning-bg);
  border: 1px solid var(--sw-warning-border);
}

.sw-banner-warning .sw-banner-text {
  color: var(--sw-warning-text);
}

.sw-banner-danger {
  background: var(--sw-danger-bg);
  border: 1px solid var(--sw-danger-border);
}

.sw-banner-danger .sw-banner-text {
  color: var(--sw-danger);
}

.sw-banner-text {
  font-size: var(--sw-text-md);
  font-weight: var(--sw-font-medium);
}