Feedback & states

<div class="flex wrap">
<button type="button" class="btn btn-primary" data-state-run="success">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m13 2-9 12h7l-1 8 10-13h-7l0-7Z"/>
</svg>Simulate success</button>
<button type="button" class="btn btn-secondary" data-state-run="error">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m6 6 12 12M6 18 18 6"/>
</svg>Simulate failure</button>
</div>
<div class="p-state-preview" data-request-state aria-live="polite">
<div>
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="9"/>
<ellipse cx="12" cy="12" rx="4" ry="9"/>
<path d="M3 12h18"/>
</svg>
<p>Production-minded patterns. Real examples. Make them yours.</p>
</div>
</div>

<div class="p-empty">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 8V6a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/>
</svg>
<h3>No matching records</h3>
<p>Try another search or clear your filters.</p>
<a class="btn btn-primary section-copy" href="pages/workspace/contacts.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>Add record</a>
</div>

<div class="p-stack">
<div class="alert alert-success" role="status">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>
<span>Your changes have been saved. You’re good to go.</span>
<button class="icon-button" data-dismiss-premium-alert aria-label="Close">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m6 6 12 12M6 18 18 6"/>
</svg>
</button>
</div>
<div class="alert alert-info" role="status">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="9"/>
<ellipse cx="12" cy="12" rx="4" ry="9"/>
<path d="M3 12h18"/>
</svg>
<span>A new perspective is always one click away.</span>
<button class="icon-button" data-dismiss-premium-alert aria-label="Close">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m6 6 12 12M6 18 18 6"/>
</svg>
</button>
</div>
<div class="alert alert-warning" role="alert">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M18 8a6 6 0 0 0-12 0c0 8-3 8-3 10h18c0-2-3-2-3-10ZM9 21h6"/>
</svg>
<span>Please review the details before continuing.</span>
<button class="icon-button" data-dismiss-premium-alert aria-label="Close">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m6 6 12 12M6 18 18 6"/>
</svg>
</button>
</div>
<div class="alert alert-danger" role="alert">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m6 6 12 12M6 18 18 6"/>
</svg>
<span>Sample request failed. You can retry.</span>
<button class="icon-button" data-dismiss-premium-alert aria-label="Close">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m6 6 12 12M6 18 18 6"/>
</svg>
</button>
</div>
</div>

<div class="p-stack" aria-label="Loading">
<div class="p-skeleton">
</div>
<div class="p-skeleton">
</div>
<div class="p-skeleton">
</div>
</div>