Skip to content

Form status#

Info
Demos
Properties

Demos#

Start with these patterns and the default state icons. For customization beyond these patterns, follow the usage guidance.

Displaying error status#

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

With a refresh action#

An error occurred while loading content. Try again
<FormStatus>
  An error occurred while loading content.{' '}
  <Anchor href="">Try again</Anchor>
</FormStatus>

Displaying information status#

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

Displaying warning status#

Warningmessage. Take notice!
<FormStatus state="warning" variant="outlined">
  Warningmessage. Take notice!
</FormStatus>

With a button as content#

Use an action that helps the user resolve the status. Other actions or custom layouts need a use case approved by DNB UX.

Text 
<FormStatus state="warning" variant="outlined">
  Text <Button variant="tertiary" text="Button as content" icon="bell" />
</FormStatus>

Displaying marketing status#

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

Stretching the status message#

NB: The inner text has a max-width of var(--prose-max-width) (defaults to 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
<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="warning"
/>

Used by the Input Component#

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

With an inline link in an input status#

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

Large variant#

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

In combination with the Icon component#

<Icon
  icon={<InfoIcon />}
  size="medium"
  title="Some title"
  inheritColor={false}
  right
/>
<Icon
  icon={SuccessIcon}
  size="medium"
  title="Some title"
  inheritColor={false}
  right
/>
<Icon
  icon={WarnIcon}
  size="medium"
  title="Some title"
  inheritColor={false}
  right
/>
<Icon
  icon={ErrorIcon}
  size="medium"
  title="Some title"
  inheritColor={false}
  right
/>
<Icon
  icon={MarketingIcon}
  size="medium"
  title="Some title"
  inheritColor={false}
/>
Suggest an edit