FieldMessage

Examples
Critical Field Message
Theme: seekAnz
This is a critical message.
Theme: seekBusiness
This is a critical message.
Theme: jobsDbRebrand
This is a critical message.
Theme: jobsDb
This is a critical message.
Theme: jobStreet
This is a critical message.
Theme: jobStreetClassic
This is a critical message.
Theme: wireframe
This is a critical message.
Code:
<FieldMessage id="id" message="This is a critical message." tone="critical" />
Positive Field Message
Theme: seekAnz
This is a positive message.
Theme: seekBusiness
This is a positive message.
Theme: jobsDbRebrand
This is a positive message.
Theme: jobsDb
This is a positive message.
Theme: jobStreet
This is a positive message.
Theme: jobStreetClassic
This is a positive message.
Theme: wireframe
This is a positive message.
Code:
<FieldMessage id="id" message="This is a positive message." tone="positive" />
Critical with long (wrapping) message
Theme: seekAnz
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla.
Theme: seekBusiness
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla.
Theme: jobsDbRebrand
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla.
Theme: jobsDb
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla.
Theme: jobStreet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla.
Theme: jobStreetClassic
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla.
Theme: wireframe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla.
Code:
<FieldMessage
  id="id"
  message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla."
  tone="critical"
/>
No message, i.e. don't reserve white space
Code:
<FieldMessage reserveMessageSpace={false} />

Required props

id
string
message
ReactNode

Optional props

reserveMessageSpace
boolean
tone
"critical" | "positive" | "neutral"
secondaryMessage
ReactNode
disabled
boolean

Further References