The Alert Dialog component is identical to Dialog except for two small differences: we do not display a close button and we do not let the user close the dialog when clicking on the backdrop (no onclick attribute on the <dialog> or the <article> elements).
The component has the following HTML structure:
diff --git a/docs/src/components/alert.njk b/docs/src/components/alert.njk index 0f1563d..4d6064d 100644 --- a/docs/src/components/alert.njk +++ b/docs/src/components/alert.njk @@ -19,20 +19,48 @@ toc: {% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %} -{% set code %}
- {% lucide "circle-check" %}
- This is an alert with icon, title and description.
-
{% endset %}
-{{ code_preview("alert", code) }}
+{% set code %}
+Success! Your changes have been saved
-
+
+{% endset %}
+{{ code_preview("alert", code | prettyHtml) }}
+ {% lucide "circle-check" %}
+ This is an alert with icon, title and description.
+
+ Success! Your changes have been saved
+
+ {% lucide "popcorn" %}
+ This is an alert with icon, title and description.
+
+ This Alert has a title and an icon. No description.
+
+ {% lucide "circle-check" %}
+
+
+
+Unable to process your payment.
+Please verify your billing information and try again.
+-
+
- Check your card details +
- Ensure sufficient funds +
- Verify billing address +
Usage
You can use one of the two classes: alert or alert-dialog.
Use the alert or alert-destructive.
+ {% lucide "circle-check" %}
+ This is an alert with icon, title and description.
+
+{% endset %}
+{{ code_block(code_simple | prettyHtml) }}
Success! Your changes have been saved
+The component has the following HTML structure:
diff --git a/docs/src/components/avatar.njk b/docs/src/components/avatar.njk index 33d80c0..c9c09c8 100644 --- a/docs/src/components/avatar.njk +++ b/docs/src/components/avatar.njk @@ -16,21 +16,23 @@ toc: {% set code %} -
- 
- 
-
+
{% set code_simple %}
diff --git a/docs/src/components/badge.njk b/docs/src/components/badge.njk
index ef1f67a..5eff349 100644
--- a/docs/src/components/badge.njk
+++ b/docs/src/components/badge.njk
@@ -25,7 +25,25 @@ toc:
{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
-{% set code %}Badge{% endset %}
+{% set code %}
+
-
-
-
-
- 
-
+
-
-
-
+
+
+
{% endset %}
-{{ code_preview("avatar", code, "max-w-md") }}
+{{ code_preview("avatar", code | prettyHtml, "w-full max-w-md") }}
+
+
+
+
+
+
+
+
Usage
-To make an avatar, simply apply Tailwind utility classes directly to an <img> element:
Avatars are just <img> elements styled with Tailwind utility classes.
diff --git a/docs/src/components/badge.njk b/docs/src/components/badge.njk
index ef1f67a..5eff349 100644
--- a/docs/src/components/badge.njk
+++ b/docs/src/components/badge.njk
@@ -25,7 +25,25 @@ toc:
{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
-{% set code %}Badge{% endset %}
+{% set code %}
+
+
+{% endset %}
{{ code_preview("badge", code) }}
+ Badge
+ Secondary
+ Destructive
+ Outline
+
+
+
+ {% lucide "badge-check" %}
+ Verified
+
+ 8
+ 99
+ 20+
+
+Usage
diff --git a/docs/src/components/button-group.njk b/docs/src/components/button-group.njk index abeb32a..289babb 100644 --- a/docs/src/components/button-group.njk +++ b/docs/src/components/button-group.njk @@ -14,28 +14,33 @@ toc: id: example-nested - label: Separator id: example-separator + - label: Input + id: example-input - label: Dropdown Menu id: example-dropdown-menu + - label: Select + id: example-select - label: Popover id: example-popover --- {% from "dropdown-menu.njk" import dropdown_menu %} {% from "popover.njk" import popover %} +{% from "select.njk" import select %} {% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %} {% set code_default %}
-
+