Actions
The Action component provides a flexible row of action buttons for AI responses with common actions like retry, like, dislike, copy, and share.
Hello, how are you?
I am fine, thank you!
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Usage with AI SDK
Build a simple chat UI where the user can copy or regenerate the most recent message.
Add the following component to your frontend:
+page.svelte
Add the following route to your backend:
api/chat/+server.ts
Features
- Row of composable action buttons with consistent styling
- Support for custom actions with tooltips
- State management for toggle actions (like, dislike, favorite)
- Keyboard accessible with proper ARIA labels
- Clipboard and Web Share API integration
- TypeScript support with proper type definitions
- Consistent with design system styling
Examples
This is a response from an assistant.
Try hovering over this message to see the actions appear!
Props
Actions
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Child Action components to render |
class | string | - | Additional CSS classes to apply to the container |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
Action
| Prop | Type | Default | Description |
|---|---|---|---|
tooltip | string | - | Tooltip text to display on hover |
label | string | - | Accessible label for screen readers (falls back to tooltip if not provided) |
children | Snippet | - | Icon or content to render inside the button |
class | string | - | Additional CSS classes to apply to the button |
variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'ghost' | Visual style variant of the button |
size | 'default' | 'sm' | 'lg' | 'icon' | 'sm' | Size of the button |
onclick | (event: MouseEvent) => void | - | Click event handler |
disabled | boolean | - | Whether the button is disabled |
...restProps | HTMLButtonAttributes | HTMLAnchorAttributes | - | All other button/anchor props are supported (href for links) |