Message bubble

What a conversation is made of. Yours are in your accent; theirs sit on the bubble surface. The corner nearest the speaker is the tail.

Preview

Did the preview build finish?

Green. Link is in the channel.

Ship it after lunch

Shape

8px by 12px padding, 15/21 text (the message size), 18px corners with a 4px tail corner on the speaker’s side: --mf-bubble-radius and --mf-bubble-tail.

Colour

Outgoing: --mf-accent with --mf-on-accent. Incoming: --mf-bubble with --mf-text. Pick a different accent on the Color page and watch your bubbles follow.

Usage

import { Bubble } from "@/components/mafold";

<Bubble from="them">Did the build finish?</Bubble>
<Bubble from="me">Green.</Bubble>