Feedback
Components that communicate status, progress, and system messages to users.
Alert
Alerts provide contextual feedback messages for typical user actions.
ℹ️
Info
This is an informational message.
✅
Success
Your changes have been saved.
⚠️
Warning
Your session will expire in 5 minutes.
🚫
Error
Something went wrong. Please try again.
<div class="kds-alert kds-alert--info">
<div class="kds-alert__icon">ℹ️</div>
<div class="kds-alert__content">
<div class="kds-alert__title">Info</div>
<div class="kds-alert__description">Message text.</div>
</div>
</div>
<!-- Variants: kds-alert--info | --success | --warning | --danger -->
Toast
Toasts are lightweight, auto-dismissing feedback notifications.
ℹ️
Info
✅
Saved
🚫
Error
<div class="kds-toast kds-toast--success" role="status">
<div class="kds-toast__icon">✅</div>
<div class="kds-toast__content">
<div class="kds-toast__title">Saved</div>
<div class="kds-toast__message">Your profile was updated.</div>
</div>
<button class="kds-toast__close" aria-label="Close">✕</button>
</div>
<!-- Variants: kds-toast--info | --success | --warning | --danger -->
Spinner
Spinners indicate that an action is loading or processing.
Loading…
Loading…
Loading…
Loading…
Loading…
<div class="kds-spinner kds-spinner--xs" role="status"
aria-label="Loading"></div>
<div class="kds-spinner kds-spinner--sm"></div>
<div class="kds-spinner kds-spinner--md"></div>
<div class="kds-spinner kds-spinner--lg"></div>
<div class="kds-spinner kds-spinner--xl"></div>
<!-- Sizes: --xs | --sm | --md | --lg | --xl -->
Progress Bar
Progress bars show the percentage of completion for a process.
Uploading…
70%
Processing…
45%
Please wait…
<!-- Standard -->
<div class="kds-progress" role="progressbar" aria-valuenow="70">
<div class="kds-progress__bar" style="width: 70%;"></div>
</div>
<!-- Striped + animated -->
<div class="kds-progress kds-progress--striped kds-progress--animated">
<div class="kds-progress__bar" style="width: 45%;"></div>
</div>
<!-- Indeterminate -->
<div class="kds-progress kds-progress--indeterminate">
<div class="kds-progress__bar"></div>
</div>
Skeleton
Skeleton placeholders represent loading content before real data arrives.
<div class="kds-skeleton kds-skeleton--circle" style="width:
48px; height: 48px;"></div>
<div class="kds-skeleton kds-skeleton--heading" style="height: 20px; width:
60%;"></div>
<div class="kds-skeleton kds-skeleton--text" style="height: 12px; width:
100%;"></div>
<!-- Shapes: --circle | --heading | --text -->