Alert

You'll still get emails from people who accidentally deleted their account, but at least you tried.

import { Alert, AlertActions, AlertDescription, AlertTitle, Button } from '@thoody-consulting/components'
import { useState } from 'react'

function Example() {
    let [isOpen, setIsOpen] = useState(false)

    return (
        <>
            <Button type="button" onClick={() => setIsOpen(true)}>
                Refund payment
            </Button>
            <Alert open={isOpen} onClose={setIsOpen}>
                <AlertTitle>Are you sure you want to refund this payment?</AlertTitle>
                <AlertDescription>
                The refund will be reflected in the customer’s bank account 2 to 3 business days after processing.
                </AlertDescription>
                <AlertActions>
                    <Button plain onClick={() => setIsOpen(false)}>
                        Cancel
                    </Button>
                    <Button onClick={() => setIsOpen(false)}>Refund</Button>
                </AlertActions>
            </Alert>
        </>
    )
}

Component API

Prop	Default	Description
Alertextends the Headless UI `<Dialog>` component
`open`	-	Whether the alert is open or not.
`onClose`	-	Called when the alert is dismissed.
`size`	`md`	The max-width of the alert.
AlertTitleextends the Headless UI `<DialogTitle>` component
This component does not expose any component-specific props.
AlertDescriptionextends the Headless UI `<Description>` component
This component does not expose any component-specific props.
AlertBodyextends the JSX `<div>` element
This component does not expose any component-specific props.
AlertActionsextends the JSX `<div>` element
This component does not expose any component-specific props.

Examples

Basic example

Use the Alert, AlertTitle, AlertDescription, and AlertActions components to build an alert:

import { Alert, AlertActions, AlertDescription, AlertTitle, Button } from '@thoody-consulting/components'
import { useState } from 'react'

function Example() {
    let [isOpen, setIsOpen] = useState(false)

    return (
        <>
            <Button type="button" onClick={() => setIsOpen(true)}>
                Refund payment
            </Button>
            <Alert open={isOpen} onClose={setIsOpen}>
                <AlertTitle>Are you sure you want to refund this payment?</AlertTitle>
                <AlertDescription>
                The refund will be reflected in the customer’s bank account 2 to 3 business days after processing.
                </AlertDescription>
                <AlertActions>
                    <Button plain onClick={() => setIsOpen(false)}>
                        Cancel
                    </Button>
                    <Button onClick={() => setIsOpen(false)}>Refund</Button>
                </AlertActions>
            </Alert>
        </>
    )
}

Alert width

Use the size prop on the Alert component to control the max-width of the alert dialog:

 import { Alert, AlertActions, AlertDescription, AlertTitle, Button } from '@thoody-consulting/components'
 import { useState } from 'react'

 function Example() {
     let [isOpen, setIsOpen] = useState(false)

     return (
        <>
             <Button type="button" onClick={() => setIsOpen(true)}>
                 Refund payment
             </Button>
             <Alert open={isOpen} onClose={setIsOpen} size="lg">
                 <AlertTitle>Are you sure you want to refund this payment?</AlertTitle>
                 <AlertDescription>
                     The refund will be reflected in the customer’s bank account 2 to 3 business days after processing.
                 </AlertDescription>
                 <AlertActions>
                     <Button plain onClick={() => setIsOpen(false)}>
                         Cancel
                     </Button>
                     <Button onClick={() => setIsOpen(false)}>Refund</Button>
                 </AlertActions>
             </Alert>
             </>
     )
 }

Available size options include xs, sm, md, lg, xl, 2xl, 3xl, 4xl, and 5xl.

With body

Add content to your alert using the AlertBody component:

 import { Alert, AlertActions, AlertDescription, AlertTitle, Input, AlertBody } from '@thoody-consulting/components'
 import { useState } from 'react'

 function Example() {
     let [isOpen, setIsOpen] = useState(false)

     return (
        <>
             <Button type="button" onClick={() => setIsOpen(true)}>
                 Delete repository
             </Button>
             <Alert open={isOpen} onClose={setIsOpen} size="sm">
                 <AlertTitle>Verification required</AlertTitle>
                 <AlertDescription>To continue, please enter your password.</AlertDescription>
                 <AlertBody>
                     <Input name="password" type="password" aria-label="Password" placeholder="•••••••" />
                 </AlertBody>
                 <AlertActions>
                     <Button plain onClick={() => setIsOpen(false)}>
                         Cancel
                     </Button>
                     <Button onClick={() => setIsOpen(false)}>Continue</Button>
                 </AlertActions>
             </Alert>
         </>
     )
 }

Auto-focusing elements

Add the autoFocus prop to any form control or button in the dialog to automatically focus it when the dialog opens:

 import { Alert, AlertActions, AlertDescription, AlertTitle, Input, AlertBody } from '@thoody-consulting/components'
 import { useState } from 'react'

 function Example() {
     let [isOpen, setIsOpen] = useState(false)

     return (
        <>
             <Button type="button" onClick={() => setIsOpen(true)}>
                 Delete repository
             </Button>
             <Alert open={isOpen} onClose={setIsOpen} size="sm">
                 <AlertTitle>Verification required</AlertTitle>
                 <AlertDescription>To continue, please enter your password.</AlertDescription>
                 <AlertBody>
                     <Input autoFocus name="password" type="password" aria-label="Password" placeholder="•••••••" />
                 </AlertBody>
                 <AlertActions>
                     <Button plain onClick={() => setIsOpen(false)}>
                         Cancel
                     </Button>
                     <Button onClick={() => setIsOpen(false)}>Continue</Button>
                 </AlertActions>
             </Alert>
         </>
     )
 }