Interface library

Interface states

Reference states used across billing, subscription and payment flows.

State library

Common product states

Reusable patterns for loading, empty data, completed actions and recoverable errors.

5 core statesBilling UI

In progress

Use while billing records, subscription data or payment information are being prepared.

Empty

No data

Shown when a section has no records yet, such as a workspace without invoices or saved payment methods.

Success

Complete

Confirms a completed interface action such as validating billing details or updating a payment method.

Warning

Attention

Used when the user can continue, but a billing condition deserves attention before it becomes blocking.

Error

Failed

Used for failed payments, invalid form data or actions that require correction before continuing.

Compact states

Small states for forms, tables and billing actions.

Payment method saved

Visa ending in 4242 is ready for renewal.

Usage approaching limit

Monthly events have reached the warning threshold.

Waiting for confirmation

The interface is ready for the next user action.

These states are reusable presentation patterns for the preview environment and can be connected to real backend conditions in production.