Component

Note

Inline contextual message in one of four semantic tones.

Plain-text source, for agents and clipboard use: /components/source/note.txt

When to use it

Explains something about the region it sits in — a constraint, a consequence, a result. It stays in the layout rather than floating over it.

Not this

For a transient confirmation of something the user just did, use a toast. For a blocking decision, use a modal. For per-field validation, use the field error text.

Examples

Tones

Read-only environment

Changes made here are not written back to Salesforce.

Evidence pack signed

Countersigned at close of trial and attached to the account record.

Three departures awaiting supplier

They will not appear on the site until the supplier confirms.

Price rule conflict

Two rules target the B2C channel for the same date range. Resolve one before publishing.

html

<div class="flux-note">
  <div>
    <p class="flux-note__title">Read-only environment</p>
    <p class="flux-note__body">Changes made here are not written back to Salesforce.</p>
  </div>
</div>

<div class="flux-note flux-note--success">
  <div>
    <p class="flux-note__title">Evidence pack signed</p>
    <p class="flux-note__body">Countersigned at close of trial and attached to the account record.</p>
  </div>
</div>

<div class="flux-note flux-note--warning">
  <div>
    <p class="flux-note__title">Three departures awaiting supplier</p>
    <p class="flux-note__body">They will not appear on the site until the supplier confirms.</p>
  </div>
</div>

<div class="flux-note flux-note--error">
  <div>
    <p class="flux-note__title">Price rule conflict</p>
    <p class="flux-note__body">Two rules target the B2C channel for the same date range. Resolve one before publishing.</p>
  </div>
</div>

Anatomy

Part	Description
Container	Tinted surface at 4px radius, no border.
Title	Optional. Bold, one line.
Body	Secondary text. Body copy stays text-primary or text-secondary, never the tone colour.

API

Name	Kind	Description
`flux-note`	class	Base class. Informational tone by default.
`flux-note--success`	class	A completed or verified outcome.
`flux-note--warning`	class	Something needs attention but nothing is broken.
`flux-note--error`	class	Something failed or blocks progress.
`flux-note__title`	class	Optional bold lead line.

States

State	Treatment
Static	Notes do not have interactive states.

Accessibility

Body text stays in a text token rather than the tone colour, which is what keeps every note at 4.5:1 on its tint.
A note appearing in response to an action belongs in a live region — role="status" for informational, role="alert" for errors.
The tone is reinforced by the wording; a note that only differs by tint is not accessible.

Tokens

The tier-3 and tier-2 tokens this component binds to. Change the token, not the component.

--flux-note-radius
--flux-note-padding
--flux-note-gap
--flux-surface-info-subtle
--flux-surface-success-subtle
--flux-surface-warning-subtle
--flux-surface-error-subtle

Do and don’t

Say what to do next, not only what happened.
Keep a note beside the thing it describes.

Don’t

Do not colour the body text with the tone colour.
Do not stack several notes at the top of a page as a substitute for fixing the flow.