Status

Feedback

Feedback components communicate outcomes quickly using semantic colors and compact shapes. This page captures alerts, statuses, and badge treatments.

Source file: styles/components/badge.css

Badges

High Medium Low Monthly Annual 
<span class="badge">Default</span>

<!-- Semantic variants -->
<span class="badge badge-high">High</span>
<span class="badge badge-medium">Medium</span>
<span class="badge badge-low">Low</span>
<span class="badge badge-monthly">Monthly</span>
<span class="badge badge-annual">Annual</span>

Alerts

Payment captured successfully.
Card expires in 9 days.
Cancellation failed.
<div class="alert success">Payment captured successfully.</div>
<div class="alert warning">Card expires in 9 days.</div>
<div class="alert danger">Cancellation failed.</div>

Empty State — .empty-state

Centered placeholder for zero-data views. Use inside any container to communicate that no items exist yet. Pair with a CTA button to guide the next action.

Source: styles/components/empty-state.css

No subscriptions yet

Import transactions first, then run detection to find recurring charges.

<div class="empty-state">
  <h3>No subscriptions yet</h3>
  <p>Import transactions first, then run detection.</p>
  <button class="btn btn-primary btn-sm" type="button">Import Transactions</button>
</div>

Inline Panels — .inline-panel

Tonal in-context info blocks used inside cards or below form fields. Lighter and more contextual than a full .alert bar — surface information at the point of relevance without interrupting the page flow.

Source: styles/components/inline-panel.css

Default muted panel — use for neutral notes or hints.
Accent panel — new info, links, or calls to action.
Success panel — cancellation confirmed. View details
Warning panel — cancellation flagged as pending.
Danger panel — action failed or requires attention.
<div class="inline-panel">Neutral note.</div>
<div class="inline-panel inline-panel-accent">Accent info.</div>
<div class="inline-panel inline-panel-success">Confirmed.</div>
<div class="inline-panel inline-panel-warning">Pending.</div>
<div class="inline-panel inline-panel-danger">Failed.</div>