Components / Message

Message

A structured message row for authorship, metadata, content, visuals and actions.

The registry build passed.

example.component.html

html

<aevko-message>
  <strong aevkoMessageAuthor>
    Ada
  </strong>
  <time aevkoMessageMeta>
    10:42
  </time>
  <aevko-bubble>
    The registry build passed.
  </aevko-bubble>
</aevko-message>

Installation

npx aevko-ui@latest add message --yes

Source ownership

Customization

Combine author, metadata, visuals, actions and any message surface without coupling the row to a chat service or icon library.

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'`	Orders visual and content by logical side.
`variant`	`'default' \| 'muted' \| 'danger'`	`'default'`	Changes visual emphasis without adding semantics.
`aevkoMessageVisual`	`projected slot`	`empty`	Optional decorative avatar or icon.
`aevkoMessageAuthor`	`projected slot`	`empty`	Visible sender or source.
`aevkoMessageMeta`	`projected slot`	`empty`	Time or delivery metadata.
`aevkoMessageAction`	`projected slot`	`empty`	Native actions associated with the message.

Accessibility contract

Accessibility

Included behavior

The component stays presentational so the containing application can choose article, log or live-region semantics.

Your responsibility

Choose the surrounding log, feed or live-region semantics and ensure author, time and actions remain understandable without the visual.

Back to all components