Skip to content
Home

FormStatus (Messageboxes)

Info
Demos
Properties

Demos

Displaying error status

Failure text
Code Editor
<FormStatus text="Failure text" />

Displaying info status

Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus
Code Editor
<FormStatus
  title="Hover title"
  text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus"
  state="info"
/>

Displaying warn status

Warningmessage. Take notice!
Code Editor
<FormStatus state="warn" variant="outlined">
  Warningmessage. Take notice!
</FormStatus>

Displaying marketing status

Marketingmessage. What a deal!
Code Editor
<FormStatus state="marketing" variant="outlined">
  Marketingmessage. What a deal!
</FormStatus>

Stretching the status message

NB: The inner text has a max-width of 60ch to ensure we do not exceed characters limit per line for accessibility reasons.

Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus
Code Editor
<FormStatus
  stretch={true}
  text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus"
  state="warn"
/>

Used by the Input Component

You have to fill in this field
Code Editor
<Input
  label="Input with status"
  status="You have to fill in this field"
  value="Input value"
/>

With a custom-styled content

My info with a link and more text
Code Editor
const CustomStatus = () => (
  <>
    My info <Link href="/">with a link</Link> and more text
  </>
)
render(
  <Input
    label="Input with custom status"
    status={<CustomStatus />}
    status_state="info"
    value="Input value"
  />,
)

Large variant

My HTML with a link and more text
Code Editor
render(
  <FormStatus state="info" size="large" variant="outlined">
    My HTML{' '}
    <Anchor href="/" target="_blank">
      with a link
    </Anchor>{' '}
    and more text
  </FormStatus>,
)

In combination with the Icon component

Code Editor
<Icon
  icon={<InfoIcon />}
  size="medium"
  title="Some title"
  inherit_color={false}
  right
/>
<Icon
  icon={WarnIcon}
  size="medium"
  title="Some title"
  inherit_color={false}
  right
/>
<Icon
  icon={ErrorIcon}
  size="medium"
  title="Some title"
  inherit_color={false}
  right
/>
<Icon
  icon={MarketingIcon}
  size="medium"
  title="Some title"
  inherit_color={false}
/>