s-m-r-t
Open the s-m-r-t source on GitHub Switch to dark color scheme
← All UI components

Messages · Components

MessageCard

Single message row with type-adaptive rendering

Public export

typescript 
import { MessageCard } from '@happyvertical/smrt-messages/svelte';
Import path
@happyvertical/smrt-messages/svelte
Props
10
Props described
10 of 10
Bindable state
0
Callback events
3
Verified release
0.44.0

Props

NameTypeRequiredDescription
messageMessageDataYesMessage data to render as a list row.
selectedbooleanNoHighlights the row to show it is currently selected.
compactbooleanNoUses condensed layout to fit more messages on screen.
showAccountbooleanNoShows the sender's account information on the row.
showTypebooleanNoShows the message type badge (email, Slack, etc.).
onclick(message: MessageData) => voidNoCalled when user clicks on the message row.
onselect(message: MessageData) => voidNoCalled when user selects the message with checkbox.
onflag(message: MessageData) => voidNoCalled when the user flags or unflags the message.
accountAccountDataNoAccount data for display if showAccount is true.
typeContentSnippet<[{ message: MessageData; }]>NoCustom snippet to render type-specific content.

Bindable state

This component has no bindable public state.

Callback events

  • onclick(message: MessageData) => void
  • onselect(message: MessageData) => void
  • onflag(message: MessageData) => void

Examples and explanation

UI showcase Read the curated UI story for mechanism and usage guidance. smrt-messages package reference See package status, version, limitations, and all public subpaths.