ChatButton

'use client';

import { ChatButton } from '@/ui/ChatButton';

export function ChatButtonDemo() {
  return (
    <div className="w-full h-full flex items-center justify-end">
      <ChatButton />
    </div>
  );
}

'use client';

import { ChatButton } from '@/ui/ChatButton';

export function ChatButtonOffsetDemo() {
  return (
    <div className="absolute inset-0 flex items-center justify-end overflow-clip">
      <ChatButton offset />
    </div>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/aibutton.json
Copy

Usage

Copyimport { ChatButton } from '@/ui/ChatButton';
 
export function Component() {
  return <ChatButton>How can I help you today?</ChatButton>;
}

API Reference

ChatButton

The ChatButton also accepts all standard HTML button attributes (onFocus, onBlur, onMouseEnter, onMouseLeave, data-*, etc.).

Examples

Custom Text

Component aibutton-custom-text-demo not found in registry.

With Click Handler

Component aibutton-custom-handler-demo not found in registry.

Disabled State

Component aibutton-disabled-demo not found in registry.

Notes

Fold/Unfold Animation

The ChatButton features a smooth fold/unfold animation system built using CSS Grid transitions. In the folded state, the button shows only the Sparkles icon. When triggered (by hover, active state, or focus), it expands to reveal the full text content.

Animation Mechanics:

• Folded: grid-cols-[24px_0fr] - icon visible, text column at 0 fractional units
• Unfolded: grid-cols-[24px_1fr] - text column expands to available space
• Text opacity transitions from 0 to 100 with a 500ms duration for smooth reveal
• Transition: transition-[grid-template-columns] for smooth grid expansion

Unfold Trigger Options

The unfoldOn prop controls when the button expands:

unfoldOn="hover" (default):

• Button unfolds on mouse hover
• Most discoverable option for users
• Best for general use cases where you want to encourage interaction

unfoldOn="active" (click/press):

• Button only unfolds when actively clicked or pressed
• Reduces visual noise from accidental hovers
• Useful in hover-sensitive areas or when you want more intentional interaction

Focus behavior: Regardless of the unfoldOn setting, the button always unfolds when focused (via keyboard navigation) for accessibility.

Offset Behavior

The offset prop enables a subtle slide-in effect for edge-aligned buttons:

When offset={true}:

• Desktop only: Button is translated 40px to the right (md:translate-x-[40px])
• Slides back in smoothly on hover or focus (hover:translate-x-0, focus-visible:translate-x-0)
• Sparkles icon also offsets to maintain visual balance
• Creates a "peek from edge" effect ideal for screen-edge positioning

Use cases:

• Buttons positioned at viewport edges (bottom-right corner)
• Creating subtle, non-intrusive chat prompts
• Reducing visual clutter while maintaining discoverability

Responsive Design

The ChatButton adapts to different screen sizes with breakpoint-based styling:

Mobile (default):

• Height: h-48 (48px)
• Padding: px-8 (8px horizontal)
• Compact design for touch interfaces

Desktop (md: breakpoint and above):

• Height: md:h-80 (80px)
• Padding: md:px-16 (16px horizontal)
• Minimum width: md:min-w-80 (80px)
• Larger touch targets and more prominent presence

Accessibility Features

The component includes several accessibility features:

• Smart aria-label generation: If no explicit aria-label is provided, the component generates one from the children prop. If children is empty or only whitespace, it falls back to "Chat with your assistant"
• Text span is aria-hidden: The visible text is hidden from screen readers (aria-hidden="true") to prevent duplicate announcements, since the button already has an aria-label
• Focus-visible ring: Shows a lavender ring (ring-8 ring-lavender/20) when focused via keyboard
• Focus triggers unfold: Button always expands on keyboard focus regardless of unfoldOn setting
• Default tabIndex: The button is keyboard accessible with a default tabIndex of 0
• Standard button semantics: Uses proper <button> element with appropriate type attribute

Positioning

The ChatButton is designed to be positioned as a floating action button, typically in the bottom-right corner of the viewport. Use fixed positioning with appropriate z-index values to ensure it appears above other content. Combine with the offset prop for a subtle slide-in effect:

Copy<div className="fixed bottom-32 right-32 z-50">
  <ChatButton offset={true}>Need help?</ChatButton>
</div>

Icons

The ChatButton includes two built-in icons:

• Sparkles icon (left): Indicates AI-powered functionality, offsets with button when offset={true}
• ArrowTailRight icon (right): Suggests forward action/interaction

These icons are integral to the component's design and cannot be customized or removed.