Constraint Message

Compact inline message for booking constraints and policy notes. Four variants: neutral (muted), info (primary tint), warning (amber — no base token exists), and destructive. Defaults icons per variant; icon can be overridden or suppressed.

core/constraint-message

Installation

1 · Add registry to components.json

2 · Install component

Examples

All variants

Neutral, info, warning, and destructive variants with default icons.

Neutral

Check-in is between 3 pm and 10 pm. Early arrivals may be available on request.

Info

Free cancellation available up to 7 days before check-in.

Warning

Pets are allowed on request only. Additional charges may apply.

Destructive

Maximum occupancy reached. Reduce the number of guests to continue.

Custom icon suppressed

Selected dates overlap with a blocked range.

API Reference

Prop	Type	Default	Description
`message`req	`string`	—	The message text to display.
`variant`	`"neutral" \| "info" \| "warning" \| "destructive"`	`"neutral"`	Visual tone. Warning uses amber palette (no base shadcn token for warning).
`icon`	`React.ReactNode \| null`	—	Overrides the default icon. Pass null to suppress the icon entirely.
`className`	`string`	—	Additional classes applied to the container.