System Message

Display contextual information, warnings, or instructions in AI interfaces.

This conversation is visible to your team. Avoid sharing sensitive personal data.

You can switch to a private workspace at any time from the header.

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/p/system-message.json

Use the "fill" prop to apply semantic background colors based on the variant. Different variants provide visual context for the message severity.

The model is running in reasoning mode. Responses might take slightly longer.

Context window is close to the limit. Summarize the conversation or archive older messages.

The tool integration failed. Review the API credentials before retrying the request.

Add a call-to-action button using the "cta" prop. You can also provide a custom icon using the "icon" snippet.

This workspace enforces human review. Make sure a teammate signs off on the final response before sending it to the customer.

Name	Type	Default
`children`	`Snippet`
`variant`	`"action" \| "warning" \| "error"`	`"action"`
`fill`	`boolean`	`false`
`icon`	`Snippet`
`isIconHidden`	`boolean`	`false`
`cta`	`CTAConfig`
`className`	`string`
`...props`	`HTMLAttributes<HTMLDivElement>`

When "cta" is provided, SystemMessage renders a small Button next to the message content.

Name	Type	Default
`label`	`string`
`onClick`	`() => void`
`variant`	`"default" \| "secondary" \| "outline" \| "ghost"`	`"default"`