Bubble Component

Popover bubble container with directional arrows, visual variants, and theme colors.

Notes

Use class .bubble on a container. Direction classes control arrow placement.
Prefer shorthand compound variants like bubble-outline-primary over bubble-outline bubble-primary — smaller CSS output.
Set custom radius via --bubble-border-radius on the element.

Basic usage

Default bubble

Default bubble with bottom arrow

Custom radius

Rounded bubble (12px)

Rich content

Title

Detailed content inside the bubble.

Direction

Bottom

Bottom-start

Bottom-end

Top

Top-start

Top-end

Start (left)

Start

Start-top

Start-bottom

End (right)

End

End-top

End-bottom

Center (no arrow)

Absolute centered, no arrow

Variants

Default (border)

Default

Outline (`.bubble-outline`) — high contrast

Outline

Solid (`.bubble-solid`) — dark fill

Solid

Subtle (`.bubble-subtle`) — borderless tint

Subtle

Theme colors (default style)

Primary

Secondary

Tertiary

Success

Error

Info

Warning

Highlight

Ink

Title

Description

Caption

Disabled

Shorthand compound variants

Muted (`.bubble-muted-*`) — light border

Primary

Success

Error

Outline (`.bubble-outline-*`)

Primary

Success

Error

Solid (`.bubble-solid-*`)

Primary

Success

Error

Subtle (`.bubble-subtle-*`) — borderless tint

Primary

Success

Error

Custom colors

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

Solid with Tailwind colors

green-500

green-800

Outline with Tailwind colors

red-500

red-800

Muted with Tailwind colors

red-500

red-100

Subtle with Tailwind colors

blue-500

blue-100

Raw color values

[blue]

[#ff0000]

Use cases

Tooltip

This is a tooltip

Success notification

Operation completed

Error notification

Operation failed

Warning notification

Password expires soon

Bubble Component

Notes

Basic usage

Default bubble

Custom radius

Rich content

Title

Direction

Bottom

Top

Start (left)

End (right)

Center (no arrow)

Variants

Default (border)

Outline (.bubble-outline) — high contrast

Solid (.bubble-solid) — dark fill

Subtle (.bubble-subtle) — borderless tint

Theme colors (default style)

Shorthand compound variants

Muted (.bubble-muted-*) — light border

Outline (.bubble-outline-*)

Solid (.bubble-solid-*)

Subtle (.bubble-subtle-*) — borderless tint

Custom colors

Solid with Tailwind colors

Outline with Tailwind colors

Muted with Tailwind colors

Subtle with Tailwind colors

Raw color values

Use cases

Tooltip

Success notification

Error notification

Warning notification

Outline (`.bubble-outline`) — high contrast

Solid (`.bubble-solid`) — dark fill

Subtle (`.bubble-subtle`) — borderless tint

Muted (`.bubble-muted-*`) — light border

Outline (`.bubble-outline-*`)

Solid (`.bubble-solid-*`)

Subtle (`.bubble-subtle-*`) — borderless tint