Feedback

Components that communicate status and system responses — alerts, badges, progress, and loading indicators.

Alert Toasts

The kd-alert component is a global singleton rendered in app.vue. Trigger alerts via the useAlert composable — they auto-dismiss after 2 seconds.

Badges

kd-badge is absolutely positioned over its parent. Wrap it in a position: relative container.

New
5
2
9+

Progress

Upload progress
45%
Storage used
65%
CPU usage
92%
Memory

Loader

kd-loader shows an animated progress bar. Toggle between show and hide states.

Chip

Compact labels for tags, filters, and statuses. Use dismissible for removable chips.

Default
Primary
Success
Warning
Error
Dismissible

Skeleton

Animated shimmer placeholders for loading states.

Tooltip

Hover-triggered labels. Supports top, bottom, left, right positions.

Top tooltip
Bottom tooltip
Left tooltip
Right tooltip

Divider

or
Section A
Section B
Section C