Bubble
A chat message in a bubble that shows who sent it.
Left out of Multi-brand Multi-brand draws on core, content and media families, not conversation. It admits only families in its roles. Its only messages go to support through a textarea. Use instead: Textarea
See it live
npm run storybookWhen to use it
- Use it when: A back-and-forth conversation between people or with an assistant.
- Not when: Comments on a page or long text (use a message or a card).
Instead:
- Message: One message with its author and time, without the bubble shape.
Words
- Shared structure: object, state, next step.
- Brand tone lives in headlines and marketing copy, not in errors.
- Errors and confirmations read the same in every brand.
- Use: Get started, Plan, Order. Avoid: Brand-specific words in errors, Jargon.
The labels components use, from the voice tokens:
content.action.commit: Savecontent.action.cancel: Cancelcontent.action.destroy: Removecontent.action.retry: Try againcontent.action.empty-action: Get started
See Voice and tone for the whole voice.
Use it in code
npx open-ds add bubble
The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.
Tokens it reads
Bubble reads 11 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Bubble's tokens to change Bubble alone.
Multi-brand decides what changes when you switch theme. Here a switch changes colors, type and shape, so the marked rows differ between its brands and between light and dark; everything else holds steady.
| Part | Its token and the semantic it aliases | Value |
|---|---|---|
| Them | ||
| Fill Changes with theme | component.bubble.them.backgroundcolor.surface.sunkenvar(--bubble-them-background) | Aster Lightslate-deep.light.100:#F1F5F9Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.100:#F1F5F9Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.100:#F1F5F9Coral Darkslate-deep.dark.100:#1E293B |
| Text Changes with theme | component.bubble.them.labelcolor.text.primaryvar(--bubble-them-label) | Aster Lightslate-deep.light.900:#0F172AAster Darkslate-deep.dark.900:#F8FAFCBirch Lightslate-deep.light.900:#0F172ABirch Darkslate-deep.dark.900:#F8FAFCCoral Lightslate-deep.light.900:#0F172ACoral Darkslate-deep.dark.900:#F8FAFC |
| Me | ||
| Fill Changes with theme | component.bubble.me.backgroundcolor.action.primaryvar(--bubble-me-background) | Aster Lightteal.light.600:#0F766EAster Darkteal.dark.600:#7FCFC6Birch Lightpurple.light.600:#6D28D9Birch Darkpurple.dark.600:#B79DF7Coral Lightorange.light.600:#C2410CCoral Darkorange.dark.600:#F7A67F |
| Text Changes with theme | component.bubble.me.labelcolor.text.on-actionvar(--bubble-me-label) | Aster Lightslate-deep.light.0:#FFFFFFAster Darkslate-deep.light.900:#0F172ABirch Lightslate-deep.light.0:#FFFFFFBirch Darkslate-deep.light.900:#0F172ACoral Lightslate-deep.light.0:#FFFFFFCoral Darkslate-deep.light.900:#0F172A |
| Bubble | ||
| Gap | component.bubble.gapspace.gap.tightvar(--bubble-gap) | space.8:0.5rem |
| Text size | component.bubble.font-sizetype.caption.font-sizevar(--bubble-font-size) | font.size.13:0.8125rem |
| Text Changes with theme | component.bubble.labelcolor.text.mutedvar(--bubble-label) | Aster Lightslate-deep.light.600:#4B5A6FAster Darkslate-deep.dark.400:#96A3B5Birch Lightslate-deep.light.600:#4B5A6FBirch Darkslate-deep.dark.400:#96A3B5Coral Lightslate-deep.light.600:#4B5A6FCoral Darkslate-deep.dark.400:#96A3B5 |
| Body | ||
| Corner Changes with theme | component.bubble.body.radiusradius.containervar(--bubble-body-radius) | Aster Lightradius.8:0.5remAster Darkradius.8:0.5remBirch Lightradius.16:1remBirch Darkradius.16:1remCoral Lightradius.20:1.25remCoral Darkradius.20:1.25rem |
| Padding, left and right | component.bubble.body.padding-xcomponent-spacing-map.x3var(--bubble-body-padding-x) | space.20:1.25rem |
| Padding, top and bottom | component.bubble.body.padding-ycomponent-spacing-map.x2var(--bubble-body-padding-y) | space.8:0.5rem |
| Text size | component.bubble.body.font-sizetype.body.font-sizevar(--bubble-body-font-size) | font.size.16:1rem |