Status
Components for displaying feedback and status information.
Alert
Contextual feedback messages for user actions.
Default alert message
Success! Operation completed.
Error! Something went wrong.
Warning! Please review before continuing.
Info: Additional information available.
Code
<div class="ip-alert">Default alert</div>
<div class="ip-alert ip-alert-success">Success message</div>
<div class="ip-alert ip-alert-error">Error message</div>
<div class="ip-alert ip-alert-warning">Warning message</div>
<div class="ip-alert ip-alert-info">Info message</div>Rounded Variant
Rounded success alert
Rounded error alert
Code
<div class="ip-alert ip-alert-success ip-rounded">Rounded alert</div>Badge
Small labels for status, counts, or categorization.
Default
Success
Error
Warning
Info
Code
<span class="ip-badge">Default</span>
<span class="ip-badge ip-badge-success">Success</span>
<span class="ip-badge ip-badge-error">Error</span>
<span class="ip-badge ip-badge-warning">Warning</span>
<span class="ip-badge ip-badge-info">Info</span>Rounded Variant
Default
Active
Offline
Code
<span class="ip-badge ip-badge-success ip-rounded">Active</span>Tag
Smaller outlined labels for metadata, categories, or filters.
Default
Accent
Success
Error
Warning
Info
Code
<span class="ip-tag">Default</span>
<span class="ip-tag ip-tag-accent">Accent</span>
<span class="ip-tag ip-tag-success">Success</span>
<span class="ip-tag ip-tag-error">Error</span>
<span class="ip-tag ip-tag-warning">Warning</span>
<span class="ip-tag ip-tag-info">Info</span>Use Case: Article Metadata
Go
htmx
Tailwind
•
5 min read