System Message

Display contextual information, warnings, or instructions in AI interfaces

Examples

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.

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.

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

npx shadcn add "https://prompt-kit.com/c/system-message.json"

Prop	Type	Default	Description
children	React.ReactNode		Content displayed inside the system message
variant	"action" \| "warning" \| "error"	"action"	Severity of the message, controlling text and icon styles
fill	boolean	false	When true, applies a semantic background color and hides the border
icon	React.ReactNode		Custom icon to display instead of the default severity icon
isIconHidden	boolean	false	Hides the icon entirely when set to true
cta	CTAConfig		Configuration for the optional call-to-action button
className	string		Additional CSS classes
...props	React.HTMLAttributes<HTMLDivElement>		Additional div props

Property	Type	Default	Description
label	string		Text displayed inside the button
onClick	() => void		Optional click handler
variant	"solid" \| "outline" \| "ghost" \| `React.ComponentProps<typeof Button>["variant"]`	"solid"	Maps to your button variants; `"solid"` uses the default button style

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