Getting Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Banner
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Command
- Collapsible
- Combobox
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Editor
- Input
- Input Group
- Label
- Loading Spinner
- Native Select
- Popover
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Steps
- Switch
- Tabs
- Textarea
- Tooltip
Patterns
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
Component Code
<april:alert-dialog> <slot:trigger> <april:button variant="outline">Delete account</april:button> </slot:trigger> <slot:content> <april:alert-dialog-header> <slot:title>Are you absolutely sure?</slot:title> <slot:description>This action cannot be undone. This will permanently delete your account and remove your data from our servers.</slot:description> </april:alert-dialog-header> <april:alert-dialog-footer> <april:alert-dialog-cancel>Cancel</april:alert-dialog-cancel> <april:alert-dialog-action>Continue</april:alert-dialog-action> </april:alert-dialog-footer> </slot:content></april:alert-dialog>
Component Code
<april:alert-dialog> <slot:trigger> <april:button variant="outline">Delete account</april:button> </slot:trigger> <slot:content> <april:alert-dialog-header> <slot:title>Are you absolutely sure?</slot:title> <slot:description>This action cannot be undone. This will permanently delete your account and remove your data from our servers.</slot:description> </april:alert-dialog-header> <april:alert-dialog-footer> <april:alert-dialog-cancel>Cancel</april:alert-dialog-cancel> <april:alert-dialog-action>Continue</april:alert-dialog-action> </april:alert-dialog-footer> </slot:content></april:alert-dialog>
Use an alert dialog for destructive or consequential actions. The dialog stays open until the user chooses an action.
<april:alert-dialog> <slot:trigger><april:button>Delete account</april:button></slot:trigger> <slot:content> <april:alert-dialog-header> <slot:title>Delete account?</slot:title> <slot:description>This action cannot be undone.</slot:description> </april:alert-dialog-header> <april:alert-dialog-footer> <april:alert-dialog-cancel>Cancel</april:alert-dialog-cancel> <april:alert-dialog-action>Delete</april:alert-dialog-action> </april:alert-dialog-footer> </slot:content></april:alert-dialog>
<april:alert-dialog> <slot:trigger><april:button>Delete account</april:button></slot:trigger> <slot:content> <april:alert-dialog-header> <slot:title>Delete account?</slot:title> <slot:description>This action cannot be undone.</slot:description> </april:alert-dialog-header> <april:alert-dialog-footer> <april:alert-dialog-cancel>Cancel</april:alert-dialog-cancel> <april:alert-dialog-action>Delete</april:alert-dialog-action> </april:alert-dialog-footer> </slot:content></april:alert-dialog>
The
trigger,
content,
title, and
description regions are named slots. The footer uses its default slot because it can contain multiple actions.
Publishing Views
Use the following commands to publish these views:
php artisan april:publish alert-dialog
php artisan april:publish alert-dialog
php artisan april:publish alert-dialog-header
php artisan april:publish alert-dialog-header
php artisan april:publish alert-dialog-footer
php artisan april:publish alert-dialog-footer
php artisan april:publish alert-dialog-action
php artisan april:publish alert-dialog-action
php artisan april:publish alert-dialog-cancel
php artisan april:publish alert-dialog-cancel
php artisan april:publish --all
php artisan april:publish --all