Components / Bubble

Bubble

A compact conversational surface with alignment, tone and reaction composition.

Can we ship the registry update?

Yes — build and accessibility checks passed.

example.component.html

html

<aevko-bubble align="end">
  The registry build passed.
  <button aevkoBubbleReactions type="button" aria-label="React with thumbs up">
    👍 2
  </button>
</aevko-bubble>

Installation

npx aevko-ui@latest add bubble --yes

Source ownership

Customization

Choose alignment and neutral hierarchy per message, then project native reaction controls that inherit currentColor and remain independently stylable.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`align`	`'start' \| 'end'`	`'start'`	Places the surface at the logical edge.
`variant`	`'default' \| 'muted' \| 'outline'`	`'default'`	Selects the neutral surface hierarchy.
`aevkoBubbleReactions`	`projected slot`	`empty`	Optional native reaction controls or metadata.

Accessibility contract

Accessibility

Included behavior

The surface adds no conversational role; projected text, reactions and controls preserve their native semantics.

Your responsibility

Provide readable message text and accessible names for reaction controls; do not use alignment or color as the only speaker cue.

Back to all components