Windcraft

18 contracts

Display components

The elements that show state and information — avatars, badges, alerts, skeletons, stats. Their contracts keep variants and tone consistent, so status and feedback read the same way across the product.

AvatarCircular representation of a user, organisation, or system entity. Falls back from image → initials → generic icon.
AvatarGroupStacked avatars with overlap. Truncates with "+N" when over the limit.
BadgeSmall status pill — for state on a card, list row, or inline tag.
TagUser-applied label for filtering/categorisation. Removable; differs from Badge (system-applied).
ChipCompact selectable item used in filter rows and contact pickers.
CardGrouped surface for related content. Most common composition primitive.
AlertInline non-dismissible notice tied to a section. For warnings/errors that aren't toasts.
BannerFull-width notice at the top of a page or layout. For account-wide events.
ToastTransient feedback message. Slides in from the bottom-right (desktop) or top (mobile).
TooltipHover/focus-triggered explanation. For icon-only buttons and disabled states only.
PopoverClick-triggered floating panel for richer content than a tooltip.
SkeletonLoading placeholder that mirrors the shape of the eventual content.
ProgressDeterminate progress bar. For uploads, multi-step flows, and rate limits.
SpinnerIndeterminate progress indicator. Use only when total time is unknown.
StatSingle big number with an optional label and trend.
KPIStat + sparkline + period selector. Card-sized; for the top of dashboards.
EmptyStatePlaceholder shown when a list, search, or feature has no content yet. Always offers a next step.
ErrorStatePage-level or section-level failure surface. Different from Toast (transient) and Alert (in-flow).

Related

Form components
Navigation components
Layout components

Get display components in your project.

Get started