Alert
Alert components.
Alert, Customization Blocks
Example:
// AppServiceProvider, "boot" method. TallStackUi::customize() ->alert() ->block('block', 'classes');TallStackUI
<x-alert> TallStackUi</x-alert> <!-- or --> <x-alert text="TallStackUi" />TallStackUI
TallStackUI
<x-alert> <x-slot:title> TallStackUi </x-slot:title> TallStackUi</x-alert> <!-- or --> <x-alert title="TallStackUi"> TallStackUi</x-alert>An option to allow the user to hide the alert
TallStackUI
TallStackUI
<x-alert title="TallStackUi" close> TallStackUi</x-alert>An option to automatically dismiss the alert after a given number of seconds
TallStackUI
TallStackUI
<!-- Dismiss after 3 seconds --><x-alert :dismiss="3"> TallStackUi</x-alert> <!-- Dismiss after 5 seconds with close button --><x-alert :dismiss="5" close> TallStackUi</x-alert>TallStackUI
TallStackUI
TallStackUI
<x-alert icon="cog"> TallStackUi</x-alert> <!-- With title --> <x-alert title="TallStackUi" icon="cog"> TallStackUi</x-alert>TallStackUI
Primary
TallStackUI
Secondary
TallStackUI
Slate
TallStackUI
Gray
TallStackUI
Zinc
TallStackUI
Neutral
TallStackUI
Stone
TallStackUI
Red
TallStackUI
Orange
TallStackUI
Amber
TallStackUI
Yellow
TallStackUI
Lime
TallStackUI
Green
TallStackUI
Emerald
TallStackUI
Teal
TallStackUI
Cyan
TallStackUI
Sky
TallStackUI
Blue
TallStackUI
Indigo
TallStackUI
Violet
TallStackUI
Purple
TallStackUI
Fuchsia
TallStackUI
Pink
TallStackUI
Rose
TallStackUI
Mauve
TallStackUI
Olive
TallStackUI
Mist
TallStackUI
Taupe
TallStackUI
Black
<x-alert title="TallStackUi" text="Primary" /><x-alert title="TallStackUi" text="Secondary" color="secondary" /><x-alert title="TallStackUi" text="Slate" color="slate" /><x-alert title="TallStackUi" text="Gray" color="gray" /><x-alert title="TallStackUi" text="Zinc" color="zinc" /><x-alert title="TallStackUi" text="Neutral" color="neutral" /><x-alert title="TallStackUi" text="Stone" color="stone" /><x-alert title="TallStackUi" text="Red" color="red" /><x-alert title="TallStackUi" text="Orange" color="orange" /><x-alert title="TallStackUi" text="Amber" color="amber" /><x-alert title="TallStackUi" text="Yellow" color="yellow" /><x-alert title="TallStackUi" text="Lime" color="lime" /><x-alert title="TallStackUi" text="Green" color="green" /><x-alert title="TallStackUi" text="Emerald" color="emerald" /><x-alert title="TallStackUi" text="Teal" color="teal" /><x-alert title="TallStackUi" text="Cyan" color="cyan" /><x-alert title="TallStackUi" text="Sky" color="sky" /><x-alert title="TallStackUi" text="Blue" color="blue" /><x-alert title="TallStackUi" text="Indigo" color="indigo" /><x-alert title="TallStackUi" text="Violet" color="violet" /><x-alert title="TallStackUi" text="Purple" color="purple" /><x-alert title="TallStackUi" text="Fuchsia" color="fuchsia" /><x-alert title="TallStackUi" text="Pink" color="pink" /><x-alert title="TallStackUi" text="Rose" color="rose" /><x-alert title="TallStackUi" text="Mauve" color="mauve" /><x-alert title="TallStackUi" text="Olive" color="olive" /><x-alert title="TallStackUi" text="Mist" color="mist" /><x-alert title="TallStackUi" text="Taupe" color="taupe" /><x-alert title="TallStackUi" text="Black" color="black" />TallStackUI
Primary
TallStackUI
Secondary
TallStackUI
Slate
TallStackUI
Gray
TallStackUI
Zinc
TallStackUI
Neutral
TallStackUI
Stone
TallStackUI
Red
TallStackUI
Orange
TallStackUI
Amber
TallStackUI
Yellow
TallStackUI
Lime
TallStackUI
Green
TallStackUI
Emerald
TallStackUI
Teal
TallStackUI
Cyan
TallStackUI
Sky
TallStackUI
Blue
TallStackUI
Indigo
TallStackUI
Violet
TallStackUI
Purple
TallStackUI
Fuchsia
TallStackUI
Pink
TallStackUI
Rose
TallStackUI
Mauve
TallStackUI
Olive
TallStackUI
Mist
TallStackUI
Taupe
TallStackUI
Black
<x-alert title="TallStackUi" text="Primary" light /><x-alert title="TallStackUi" text="Secondary" color="secondary" light /><x-alert title="TallStackUi" text="Slate" color="slate" light /><x-alert title="TallStackUi" text="Gray" color="gray" light /><x-alert title="TallStackUi" text="Zinc" color="zinc" light /><x-alert title="TallStackUi" text="Neutral" color="neutral" light /><x-alert title="TallStackUi" text="Stone" color="stone" light /><x-alert title="TallStackUi" text="Red" color="red" light /><x-alert title="TallStackUi" text="Orange" color="orange" light /><x-alert title="TallStackUi" text="Amber" color="amber" light /><x-alert title="TallStackUi" text="Yellow" color="yellow" light /><x-alert title="TallStackUi" text="Lime" color="lime" light /><x-alert title="TallStackUi" text="Green" color="green" light /><x-alert title="TallStackUi" text="Emerald" color="emerald" light /><x-alert title="TallStackUi" text="Teal" color="teal" light /><x-alert title="TallStackUi" text="Cyan" color="cyan" light /><x-alert title="TallStackUi" text="Sky" color="sky" light /><x-alert title="TallStackUi" text="Blue" color="blue" light /><x-alert title="TallStackUi" text="Indigo" color="indigo" light /><x-alert title="TallStackUi" text="Violet" color="violet" light /><x-alert title="TallStackUi" text="Purple" color="purple" light /><x-alert title="TallStackUi" text="Fuchsia" color="fuchsia" light /><x-alert title="TallStackUi" text="Pink" color="pink" light /><x-alert title="TallStackUi" text="Rose" color="rose" light /><x-alert title="TallStackUi" text="Mauve" color="mauve" light /><x-alert title="TallStackUi" text="Olive" color="olive" light /><x-alert title="TallStackUi" text="Mist" color="mist" light /><x-alert title="TallStackUi" text="Taupe" color="taupe" light /><x-alert title="TallStackUi" text="Black" color="black" light />TallStackUI
Primary
TallStackUI
Secondary
TallStackUI
Slate
TallStackUI
Gray
TallStackUI
Zinc
TallStackUI
Neutral
TallStackUI
Stone
TallStackUI
Red
TallStackUI
Orange
TallStackUI
Amber
TallStackUI
Yellow
TallStackUI
Lime
TallStackUI
Green
TallStackUI
Emerald
TallStackUI
Teal
TallStackUI
Cyan
TallStackUI
Sky
TallStackUI
Blue
TallStackUI
Indigo
TallStackUI
Violet
TallStackUI
Purple
TallStackUI
Fuchsia
TallStackUI
Pink
TallStackUI
Rose
TallStackUI
Mauve
TallStackUI
Olive
TallStackUI
Mist
TallStackUI
Taupe
TallStackUI
Black
<x-alert title="TallStackUi" text="Primary" outline /><x-alert title="TallStackUi" text="Secondary" color="secondary" outline /><x-alert title="TallStackUi" text="Slate" color="slate" outline /><x-alert title="TallStackUi" text="Gray" color="gray" outline /><x-alert title="TallStackUi" text="Zinc" color="zinc" outline /><x-alert title="TallStackUi" text="Neutral" color="neutral" outline /><x-alert title="TallStackUi" text="Stone" color="stone" outline /><x-alert title="TallStackUi" text="Red" color="red" outline /><x-alert title="TallStackUi" text="Orange" color="orange" outline /><x-alert title="TallStackUi" text="Amber" color="amber" outline /><x-alert title="TallStackUi" text="Yellow" color="yellow" outline /><x-alert title="TallStackUi" text="Lime" color="lime" outline /><x-alert title="TallStackUi" text="Green" color="green" outline /><x-alert title="TallStackUi" text="Emerald" color="emerald" outline /><x-alert title="TallStackUi" text="Teal" color="teal" outline /><x-alert title="TallStackUi" text="Cyan" color="cyan" outline /><x-alert title="TallStackUi" text="Sky" color="sky" outline /><x-alert title="TallStackUi" text="Blue" color="blue" outline /><x-alert title="TallStackUi" text="Indigo" color="indigo" outline /><x-alert title="TallStackUi" text="Violet" color="violet" outline /><x-alert title="TallStackUi" text="Purple" color="purple" outline /><x-alert title="TallStackUi" text="Fuchsia" color="fuchsia" outline /><x-alert title="TallStackUi" text="Pink" color="pink" outline /><x-alert title="TallStackUi" text="Rose" color="rose" outline /><x-alert title="TallStackUi" text="Mauve" color="mauve" outline /><x-alert title="TallStackUi" text="Olive" color="olive" outline /><x-alert title="TallStackUi" text="Mist" color="mist" outline /><x-alert title="TallStackUi" text="Taupe" color="taupe" outline /><x-alert title="TallStackUi" text="Black" color="black" outline />TallStackUI
Extra small
TallStackUI
Small
TallStackUI
Medium
TallStackUI
Large
TallStackUI
Extra large
<!-- xs, sm, md, lg (default), xl --> <x-alert title="TallStackUi" text="Extra small" rounded="xs" /><x-alert title="TallStackUi" text="Small" rounded="sm" /><x-alert title="TallStackUi" text="Medium" rounded="md" /><x-alert title="TallStackUi" text="Large" rounded="lg" /><x-alert title="TallStackUi" text="Extra large" rounded="xl" />TallStackUI
No rounded corners.
<x-alert title="TallStackUi" text="No rounded corners." square />TallStackUI
Inherits the red color
TallStackUI
Inherits the green color
TallStackUI
Explicit blue border
TallStackUI
Explicit rose border
TallStackUI
Outline + side border
TallStackUI
Square + side border
<!-- Side only — color inherited from the alert's `color` --><x-alert title="TallStackUi" text="Inherits the red color" color="red" light bordered="left" /><x-alert title="TallStackUi" text="Inherits the green color" color="green" light bordered="right" /> <!-- Explicit color via `<side>:<color>` syntax --><x-alert title="TallStackUi" text="Explicit blue border" color="primary" light bordered="left:blue" /><x-alert title="TallStackUi" text="Explicit rose border" color="primary" light bordered="right:rose" /> <!-- Combinable with `outline` and `square` --><x-alert title="TallStackUi" text="Outline + side border" color="primary" outline bordered="left:amber" /><x-alert title="TallStackUi" text="Square + side border" color="primary" light square bordered="left:violet" />
Use "left"
or "right"
to inherit the alert's color
,
or "<side>:<color>"
(e.g., "left:red"
) to pin an explicit
color independent from the rest of the alert. All 28 colors are supported.