Section Message
SectionMessage is a prominent bordered message block with a title, body content, and an optional actions slot. Use it to communicate important contextual information within a page — for example, form-level errors, upgrade prompts, or step-level warnings.
Info
API key required
To enable Sage sync, generate an API key in your account settings and paste it here.
Tailwind v4
vue
<SectionMessage title="API key required" appearance="info">
To enable Sage sync, generate an API key in your account settings and paste it here.
</SectionMessage>Warning
Unsaved changes
You have unsaved changes in this form. Navigating away will discard them.
Tailwind v4
vue
<SectionMessage title="Unsaved changes" appearance="warning">
You have unsaved changes in this form. Navigating away will discard them.
</SectionMessage>Error
Submission failed
Please fix the 3 validation errors below before submitting.
Tailwind v4
vue
<SectionMessage title="Submission failed" appearance="error">
Please fix the 3 validation errors below before submitting.
</SectionMessage>Success
Configuration saved
Your plant configuration was updated and will take effect on the next shift.
Tailwind v4
vue
<SectionMessage title="Configuration saved" appearance="success">
Your plant configuration was updated and will take effect on the next shift.
</SectionMessage>Discovery
New: Sieve test exports
You can now export sieve test results as a Certificate of Analysis PDF. Try it in the Reports tab.
Tailwind v4
vue
<SectionMessage title="New: Sieve test exports" appearance="discovery">
You can now export sieve test results as a Certificate of Analysis PDF.
</SectionMessage>With actions slot
Storage limit approaching
You've used 90% of your storage quota. Export or delete old records to free up space.
Tailwind v4
vue
<SectionMessage title="Storage limit approaching" appearance="warning">
You've used 90% of your storage quota.
<template #actions>
<Button size="sm">Export records</Button>
<Button size="sm" variant="secondary">Manage storage</Button>
</template>
</SectionMessage>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Optional bold heading |
appearance | 'info' | 'warning' | 'error' | 'success' | 'discovery' | 'info' | Color scheme and icon |
Slots
| Slot | Description |
|---|---|
default | Body content (text, lists, etc.) |
actions | Optional row of action buttons or links rendered below the body |