0.0.2 • Published 7 months ago
@tailus/themer-alert-dialog v0.0.2
Alert Dialog Theme
Overview
The alert dialog theme is a collection of Tailwindcss utilities that can be used to create alert dialogs with different variants and colors. The default variant is alertDialog
, but there is also a centered variant called centeredAlertDialog
. Both variants share the same properties, which can be customized to meet your needs.
Installation
To install the alert dialog theme, run the following command:
npm install @tailus/themer-alert-dialog
Importation
To import the alert dialog theme, use the following import:
import { alertDialog, centeredAlertDialog } from "@tailus/themer-alert-dialog";
import { centredAlertDialog as alertDialogTheme } from "@tailus/themer-alert-dialog";
Variants
The following variants are available :
alertDialog
: The default variant.centeredAlertDialog
: A variant that centers the alert dialog content.
Properties
The following properties are available for both variants:
content
: The Tailwindcss utility for the content of the alert dialog.overlay
: The Tailwindcss utility for the overlay that appears behind the alert dialog.title
: The Tailwindcss utility for the title of the alert dialog.description
: The Tailwindcss utility for the description of the alert dialog.actions
: The Tailwindcss utility for the actions in the alert dialog.imageContainer
: An object containing the Tailwindcss utilities for the image container in the alert dialog. The object contains the following properties:info
: The Tailwindcss utility for the image container when the alert dialog has an info icon.warning
: The Tailwindcss utility for the image container when the alert dialog has a warning icon.danger
: The Tailwindcss utility for the image container when the alert dialog has a danger icon.image
: The Tailwindcss utility for the image in the alert dialog.
Examples
Radix UI
Default variant
import { alertDialog as alertDialogTheme } from "@tailus/themer-alert-dialog";
import { button as solidButton, ghostButton, softIconButton } from "@tailus/themer-button";
import { TrashIcon } from "@radix-ui/react-icons";
import * as AlertDialog from "@radix-ui/react-alert-dialog";
const AlertDialogUI = () => (
<AlertDialog.Root>
<AlertDialog.Trigger asChild>
<button className={softIconButton.danger.md}>
<span className="sr-only">Delete</span>
<TrashIcon className={softIconButton.icon.md} aria-hidden />
</button>
</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={alertDialogTheme.overlay} />
<AlertDialog.Content className={alertDialogTheme.content}>
<AlertDialog.Title className={alertDialogTheme.title}>
Are you absolutely sure?
</AlertDialog.Title>
<AlertDialog.Description className={alertDialogTheme.description}>
This action cannot be undone. This will permanently delete your account and
remove your data from our servers.
</AlertDialog.Description>
<div className={alertDialogTheme.actions}>
<AlertDialog.Cancel asChild>
<button className={ghostButton.gray.md}>
<span>Cancel</span>
</button>
</AlertDialog.Cancel>
<AlertDialog.Action asChild>
<button className={solidButton.danger.md}>
<span>Delete</span>
</button>
</AlertDialog.Action>
</div>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
);
export default AlertDialogUI;
Centered variant
import { centredAlertDialog as alertDialogTheme } from "@tailus/themer-alert-dialog";
import { button as solidButton, ghostButton, softIconButton } from "@tailus/themer-button";
import { TrashIcon } from "@radix-ui/react-icons";
import * as AlertDialog from "@radix-ui/react-alert-dialog";
const CentredAlertDialog = () => (
<AlertDialog.Root>
<AlertDialog.Trigger asChild>
<button className={softIconButton.danger.md}>
<span className="sr-only">Delete</span>
<TrashIcon className={softIconButton.icon.md} aria-hidden />
</button>
</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={alertDialogTheme.overlay} />
<AlertDialog.Content className={alertDialogTheme.content}>
<div className={alertDialogTheme.imageContainer.danger}>
<img
className={alertDialogTheme.image}
src="https://cdn-icons-png.flaticon.com/512/6460/6460112.png"
alt=""
/>
</div>
<AlertDialog.Title className={alertDialogTheme.title}>
Are you absolutely sure?
</AlertDialog.Title>
<AlertDialog.Description className={alertDialogTheme.description}>
This action cannot be undone. This will permanently delete your account and
remove your data from our servers.
</AlertDialog.Description>
<div className={alertDialogTheme.actions}>
<AlertDialog.Cancel asChild>
<button className={ghostButton.gray.md}>
<span>Cancel</span>
</button>
</AlertDialog.Cancel>
<AlertDialog.Action asChild>
<button className={solidButton.danger.md}>
<span>Delete</span>
</button>
</AlertDialog.Action>
</div>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
);
export default CentredAlertDialog;
Customization
The following properties can be customized:
- overlay light color
- overlay dark color
- alert dialog shadow
- alert dialog light border color
- alert dialog dark border color
- alert dialog dark background color
- alert dialog border radius
tailus: {
components: {
alertDialog: {
borderRadius: "",
borderColor : "",
alertBackground : ""
overlayBackground : "",
shadow : {
size : "",
opacity:""
},x
dark : {
borderColor : "",
alertBackground : ""
overlayBackground : "",
}
},
},
},