mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 13:48:28 +00:00
108 lines
3.5 KiB
Plaintext
108 lines
3.5 KiB
Plaintext
---
|
|
layout: layouts/page.njk
|
|
title: Alert
|
|
description: Displays a callout for user attention.
|
|
toc:
|
|
- label: Usage
|
|
id: usage
|
|
- label: Examples
|
|
id: examples
|
|
children:
|
|
- label: Destructive
|
|
id: example-destructive
|
|
- label: No description
|
|
id: example-no-description
|
|
- label: No icon
|
|
id: example-no-icon
|
|
---
|
|
|
|
{% from "macros/code_preview.njk" import code_preview %}
|
|
{% from "macros/code_block.njk" import code_block %}
|
|
|
|
{% set code %}
|
|
<div class="grid w-full max-w-xl items-start gap-4">
|
|
<div class="alert">
|
|
{% lucide "circle-check" %}
|
|
<h2>Success! Your changes have been saved</h2>
|
|
<section>This is an alert with icon, title and description.</section>
|
|
</div>
|
|
<div class="alert">
|
|
{% lucide "popcorn" %}
|
|
<h2>This Alert has a title and an icon. No description.</h2>
|
|
<section>This is an alert with icon, title and description.</section>
|
|
</div>
|
|
<div class="alert-destructive">
|
|
{% lucide "circle-check" %}
|
|
<h2>Unable to process your payment.</h2>
|
|
<section>
|
|
<p>Please verify your billing information and try again.</p>
|
|
<ul class="list-inside list-disc text-sm">
|
|
<li>Check your card details</li>
|
|
<li>Ensure sufficient funds</li>
|
|
<li>Verify billing address</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
{% endset %}
|
|
{{ code_preview("alert", code | prettyHtml) }}
|
|
|
|
<h2 id="usage">Usage</h2>
|
|
|
|
<section class="prose">
|
|
<p>Use the <code>alert</code> or <code>alert-destructive</code>.</p>
|
|
</section>
|
|
|
|
{% set code_simple %}
|
|
<div class="alert">
|
|
{% lucide "circle-check" %}
|
|
<h2>Success! Your changes have been saved</h2>
|
|
<section>This is an alert with icon, title and description.</section>
|
|
</div>
|
|
{% endset %}
|
|
{{ code_block(code_simple | prettyHtml) }}
|
|
|
|
<section class="prose">
|
|
<p>The component has the following HTML structure:</p>
|
|
<dl>
|
|
<dt><code class="highlight language-html"><div class="alert"></code></dt>
|
|
<dd>Main container. Use <code>alert</code> for default styling or <code>alert-destructive</code> for error states.
|
|
<dl>
|
|
<dt><code class="highlight language-html"><svg></code> <span class="badge-secondary">Optional</span></dt>
|
|
<dd>The icon.</dd>
|
|
<dt><code class="highlight language-html"><h2></code></dt>
|
|
<dd>The title.</dd>
|
|
<dt><code class="highlight language-html"><section></code> <span class="badge-secondary">Optional</span></dt>
|
|
<dd>The description.</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
</section>
|
|
|
|
<h2 id="examples"><a href="#examples">Examples</a></h2>
|
|
|
|
<h3 id="example-destructive"><a href="#example-destructive">Destructive</a></h3>
|
|
|
|
{% set code %}<div class="alert-destructive">
|
|
{% lucide "circle-alert" %}
|
|
<h2>Something went wrong!</h2>
|
|
<section>Your session has expired. Please log in again.</section>
|
|
</div>{% endset %}
|
|
{{ code_preview("alert-destructive", code) }}
|
|
|
|
<h3 id="example-no-description"><a href="#example-no-description">No description</a></h3>
|
|
|
|
{% set code %}
|
|
<div class="alert">
|
|
{% lucide "shield-alert" %}
|
|
<h2>This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines</h2>
|
|
</div>{% endset %}
|
|
{{ code_preview("alert-no-description", code) }}
|
|
|
|
<h3 id="example-no-icon"><a href="#example-no-icon">No icon</a></h3>
|
|
|
|
{% set code %}<div class="alert">
|
|
<h2>Success! Your changes have been saved</h2>
|
|
<section>This is an alert with icon, title and description.</section>
|
|
</div>{% endset %}
|
|
{{ code_preview("alert-no-icon", code) }} |