ChatReaction

Emoji reaction pill with count and active state, typically displayed below chat messages for team-style reactions.

Preview

Static

Interactive

Import

import { ChatReaction } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
emoji	`string`	—	The emoji character to display.
count	`number`	`1`	Number of reactions.
active	`boolean`	`false`	Whether the current user has reacted.
onClick	`() => void`	—	Called when the reaction is clicked.

Examples

Reactions

import { ChatReaction } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '0.25rem' }}>
      <ChatReaction emoji="👍" count={3} active />
      <ChatReaction emoji="❤️" count={1} />
      <ChatReaction emoji="😂" count={2} />
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */