Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add callout

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::callout> is the prose counterpart of alert.

An alert reports what just happened and often needs announcing. A callout is part of the document — a note in a guide, a warning in a changelog — and is read in its turn.

Basic Usage

Worth knowing

The CLI copies the component into your own application, so you can edit it freely.
<x-aura::callout variant="tip" title="Worth knowing">
    The CLI copies the component into your own application, so you can edit it freely.
</x-aura::callout>
<x-aura::callout variant="tip" title="Worth knowing">
    The CLI copies the component into your application.
</x-aura::callout>

Variants

Notes carry context that is useful but not urgent.
Tips suggest a better way of doing something.
Info states a fact worth repeating.
Warnings describe what will go wrong.
Danger is for what cannot be undone.
<div class="space-y-3">
    <x-aura::callout>Notes carry context that is useful but not urgent.</x-aura::callout>
    <x-aura::callout variant="tip">Tips suggest a better way of doing something.</x-aura::callout>
    <x-aura::callout variant="info">Info states a fact worth repeating.</x-aura::callout>
    <x-aura::callout variant="warning">Warnings describe what will go wrong.</x-aura::callout>
    <x-aura::callout variant="danger">Danger is for what cannot be undone.</x-aura::callout>
</div>

Props

Prop Type Default Description
variant string 'note' note, tip, info, warning, danger.
title string|null null Bold line above the body.
icon string|null null Overrides the icon the variant would choose.

Accessibility

  • The icon is aria-hidden: it repeats what the variant and the title already say, and announcing it would only add noise.
  • No role="alert". That interrupts whatever a screen reader is currently saying, which is right for something that just happened and wrong for a paragraph in a page. Use alert when you need the interruption.