IxDF Design System

“Speech Bubble” Component

Overview

The component is used to display a user’s photo with a speech bubble. In most pf the cases, the text is the same, that’s why we have assistant sub-component with a predefined message.

Mads Soegaard
Hello! This is a text from the default slot.

Usage

@component('components.speechBubble', ['speakingMember' => $member])Hello! This is a text from the default slot.@endcomponent

Props

  • speakingMember (required)
    App\Models\Member\Member

    Member instance to use photo and contact info.

Slots

  • default
    string (HTML)

    Custom speech message to display in a bubble.

Assistant sub-component

assistantis an extended version of thr speechBubble component. The only different is the default text: assistant has a default text, but still can be customized via default slot.

Default text:
Mads Soegaard
Hi, I’m Mads. Need help? Check out our FAQs or reach me at hello@interaction-design.org.
Custom text:
Mads Soegaard
How can I help you?
// Default text
@component('components.assistant', ['member' => $member])@endcomponent

// Custom text
@component('components.assistant', ['member' => $member])
    How can I help you?
@endcomponent