import {
  StatusBadge,
  StatusBadgeLink,
  StatusBadgeButton,
} from "@vitality-ds/components";

Use the status badges to inform the user of the status of an action or entity. This should help them to easily understand the state and whether an action needs to be taken.

Although they will often reflect common status like success, warnings and critical errors, sometimes a status may be the result of a medical-specific action such as drug interaction screening:

The importance of a StatusBadge determines its level of visual prominence. The default importance level draws enough attention without being too bold.

• Use importance="high" when the status being displayed is crucial for the user's intended actions in any page context
• Use importance="low" when the status is a minor attribute or repeated a lot in a table.

<Stack direction="horizontal" wrap={{ "@initial": "wrap", "@bp1": "no-wrap" }}>
  <StatusBadge importance="low" label="Low Importance" />
  <StatusBadge importance="normal" label="Normal (Default)" />
  <StatusBadge importance="high" label="High Importance" />
</Stack>

Indicate the severity of a status using Vitality's feedback color scale.

<Stack direction="horizontal" wrap={{ "@initial": "wrap", "@bp1": "no-wrap" }}>
  <StatusBadge severity="neutral" label="Neutral" />
  <StatusBadge severity="info" label="Info" />
  <StatusBadge severity="accent" label="Accent" />
  <StatusBadge severity="success" label="Success" />
  <StatusBadge severity="warning" label="Warning" />
  <StatusBadge severity="critical" label="Critical" />
</Stack>

Use icons to support communicating the severity of the status. Each severity type comes with a default icon, however you can choose to pass in another icon via the icon prop.

<StatusBadge
  severity="warning"
  label="Partially Screened"
  icon={<Medications />}
/>

If the icon is unnecessary, such as when no icon effectively matches the use case or there are space limitations, use hideIcon to remove it.

<StatusBadge
  severity="accent"
  importance="high"
  label="Coming Soon"
  hideIcon
/>

Sometimes it is useful to provide the user with an action to take if they wish to learn more about a status.

To perform an action by clicking the component, use StatusBadgeButton. If clicking the component should navigate the user to another page, use StatusBadgeLink.

<StatusBadgeButton
  onClick={() => alert("Action triggered by button")}
  severity="critical"
  importance="high"
  label="Medication expired"
/>

<StatusBadgeLink
  href="#"
  target="_blank"
  severity="success"
  importance="low"
  label="Request Approved"
  icon={<Completed />}
/>

When writing statuses, be succinct avoid superfluous information. The status badge should focus on communicating a status only and let tooltips or other user actions provide additional information.

If a status requires a little bit more explanation, but not enough to warrant a button or link – wrap it in a tooltip to provide a further explanation of the status.

<Tooltip content="This medication has only been partially screened. Please take care when prescribing.">
  <StatusBadge severity="warning" label="Partially Screened" />
</Tooltip>