Bubble
The shape that holds the text of a message, in seven variants, with reactions and as a button.
A bubble holds the text of one message. It sizes to its content up to 80% of the column, sits on the start or end side, and can carry reactions. Use it inside a message, or on its own for a short note in a stream.
// apps/docs/examples/ui/bubble.tsx'use client';
import {useState} from 'react';
import { Bubble, BubbleContent, BubbleGroup, BubbleReactions,} from '@workspace/active-ui/components/primitives/bubble';
const VARIANTS = [ 'default', 'secondary', 'muted', 'tinted', 'outline', 'ghost', 'destructive',] as const;
/** * The shape of a message: seven variants, a bubble aligned to the end, a * bubble with reactions, and a bubble that is a button. */export default function BubbleExample() { const [liked, setLiked] = useState(false); return ( <div className="flex w-full max-w-md flex-col gap-6"> <BubbleGroup> {VARIANTS.map((variant) => ( <Bubble key={variant} variant={variant}> <BubbleContent>The {variant} variant</BubbleContent> </Bubble> ))} </BubbleGroup> <BubbleGroup> <Bubble align="end"> <BubbleContent>Aligned to the end</BubbleContent> </Bubble> <Bubble variant="secondary"> <BubbleContent>With a reaction</BubbleContent> <BubbleReactions aria-label="1 reaction">👍</BubbleReactions> </Bubble> <Bubble variant="outline"> <BubbleContent render={<button type="button" />} aria-pressed={liked} onClick={() => setLiked(!liked)} > {liked ? 'Liked: press to undo' : 'Press this bubble to like it'} </BubbleContent> </Bubble> </BubbleGroup> </div> );}Usage#
import { Bubble, BubbleContent,} from '@workspace/active-ui/components/primitives/bubble';
<Bubble variant="muted"> <BubbleContent>Could you check the address?</BubbleContent></Bubble>;Anatomy#
Bubble: a column of bubbles with a small gap.Group Bubble: the frame.variant:default(primary),secondary,muted,tinted(a light tint of the primary colour),outline,ghost(no shape, for long text) ordestructive(a message that failed).align:startorend.Bubble: the text.Content rendermakes it another element, such as a button or a link; it then gets a hover state.Bubble: reactions on the edge.Reactions align(start,end) andside(top,bottom) place them.
What your application provides#
The content and the side.
The meaning behind a variant in text as well: a failed message says that it failed, not only in red.
Accessibility#
A bubble is read as its text. A bubble rendered as a button is an ordinary button; give it a name that says what pressing does when the text alone does not.
API#
Import from @workspace/
Props
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Other parts#
BubbleReactions
Parts that take only their element’s attributes
Bubble: the attributes of aGroup <div>, with className and ref.Bubble: the attributes of aContent <div>, with className and ref, and Base UI'srenderto use your own element.