Instruction
Use within content-heavy elements to provide additional information to the user. Change the intent to convey appropriate sentiment — warning or destructive for critical actions, positive to confirm completion, and info to explain what a section or element is about.
Capacity pools let multiple items share the same inventory.
This action cannot be undone. All data will be permanently deleted.
Changing this setting will affect all active bookings.
Payment details have been saved successfully.
Golfer Spots is shared between Single and Foursome ticket types.
preview
props
| Prop | Type | Default | Description |
|---|---|---|---|
intent | 'info' | 'negative' | 'warning' | 'positive' | 'neutral' | 'info' | Visual intent — drives icon and background colour. |
children | ReactNode | required | The instructional content. |
usage
Place an Instruction directly below or above the element it relates to. Keep the copy short — one sentence is ideal. The intent should always match the sentiment of the message, not the surrounding surface.
When to use
- To explain what a field, setting, or section does
- To warn users before a destructive or irreversible action
- To confirm that something has already been completed
Do not use
- As a primary action — pair it with buttons for actions
- For long-form explanations — keep copy to one or two sentences
- When the content is optional — an Instruction implies the user should read it
Deleting this event cannot be undone.
DoMatch the intent to the sentiment — use negative for destructive actions.
Deleting this event cannot be undone.
Don’tDon’t use info for destructive or high-urgency messages.
intents
Capacity pools let multiple items share the same inventory. For example, Single Golfers and Foursomes can both draw from a "Golfer Spots" pool.
InfoUse to explain what a field, setting, or section does. The default intent.
This action cannot be undone. All data will be permanently deleted.
NegativeUse for destructive or irreversible actions that the user must be aware of.
Changing this setting will affect all active bookings.
WarningUse when a change has significant downstream consequences.
Payment details have been saved and verified.
PositiveUse to confirm that something has already been done or is in a good state.
Golfer Spots is shared between Single and Foursome ticket types.
NeutralUse for supplementary information without strong sentiment.