ColidyUI

Installation

npx @colidy/ui i alert

API Reference

Prop	Type	Default
children*	React.ReactNode	null
title*	string	null
description*	string	null
cancelText	string	Cancel
confirmText	string	Confirm
onSuccess*	function	null
onCancel*	function	null

Examples

Basic Alert

A basic alert with a title and description.

example.tsx

import { Alert } from "@/colidy-ui/Alert";

export default function BasicAlert() {
    return (
        <Alert
            title="Are you sure you want to delete your profile?"
            description="If you delete your profile, all your data will be lost. And you won't be able to recover it."
        >
            <button className="bg-foreground px-4 py-2 rounded flex justify-between items-center gap-6 w-auto h-12 !outline-none text-primary backdrop-blur">
                <span>Delete profile</span>
            </button>
        </Alert>
    );
}

Alert with Custom Button Texts

Change the text of the cancel and confirm buttons.

example.tsx

import { Alert } from "@/colidy-ui/Alert";

export default function AlertWithCustomButtonTexts() {
    return (
        <Alert
            title="Are you sure you want to delete your profile?"
            description="If you delete your profile, all your data will be lost."
            confirmText="Yes, delete"
            cancelText="No, cancel"
        >
            <button className="bg-foreground px-4 py-2 rounded flex justify-between items-center gap-6 w-auto h-12 !outline-none text-primary backdrop-blur">
                <span>Delete profile</span>
            </button>
        </Alert>
    );
}

Alert with Body

Add a body addtional content to the alert.

example.tsx

import { Alert } from "@/colidy-ui/Alert";
import { TextField } from "@/colidy-ui/TextField";

export default function AlertWithBody() {
    return (
        <Alert
            title="Are you sure you want to delete your profile?"
            description="If you delete your profile, enter your password to confirm."
        >
            <button className="bg-foreground px-4 py-2 rounded flex justify-between items-center gap-6 w-auto h-12 !outline-none text-primary backdrop-blur">
                <span>Delete profile</span>
            </button>

            <TextField
                label="Password"
                type="password"
                placeholder="Enter your password"
            />
        </Alert>
    );
}