Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add mail-message

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.

Pro Component — This component requires an Aura UI Pro license.

Overview

Where x-aura::chat-bubble models short chat messages, the Mail components model email-style threads: each message carries a sender and recipient, a subject line, a timestamp, an optionally collapsible long body, and file attachments. Use x-aura::mail-timeline as the vertical container and x-aura::mail-message for each message.

Basic Usage

<x-aura::mail-timeline>
    <x-aura::mail-message
        direction="in"
        from="[email protected]"
        to="[email protected]"
        subject="Re: your quote"
        time="Mon 09:14"
        :collapsible="true"
    >
        {{ $email->body }}

        <x-slot:attachments>
            <x-aura::mail-attachment name="quote.pdf" :href="$email->attachmentUrl" />
        </x-slot:attachments>
    </x-aura::mail-message>

    <x-aura::mail-message direction="out" from="[email protected]" to="[email protected]" subject="Re: your quote" time="Mon 10:02">
        Thanks — attached the revised version.
    </x-aura::mail-message>
</x-aura::mail-timeline>

Outgoing messages (direction="out") get a primary-coloured left accent; incoming messages are neutral. The body preserves line breaks (whitespace-pre-line), and when collapsible is set a long body is clamped with a Show all / Show less toggle.

Components

x-aura::mail-timeline

Vertical container for a conversation. Renders its slot in a spaced column.

x-aura::mail-message

Prop Type Default Description
direction string in in (neutral) or out (primary accent).
from string null Sender, shown in the header.
to string null Recipient, shown under the sender.
subject string null Subject line above the body.
time string null Timestamp, aligned to the right of the header.
collapsible bool false Clamp long bodies with a show-all toggle.

Slots: the default slot is the message body; the attachments slot holds attachment chips.

x-aura::mail-attachment

Prop Type Default Description
name string — File name shown on the chip (required).
href string null When set, the chip becomes a link that opens in a new tab. 
<x-aura::mail-attachment name="contract.pdf" href="https://example.com/files/contract.pdf" />
<x-aura::mail-attachment name="inline-note.txt" /> {{-- non-link chip --}}