Skip to main content
BEEQ Status component overview
Statuses help people understand the current state of an item at a glance. Use them when a short label plus a small visual cue makes lists, cards, and workflows easier to scan.
bq-status implements the dot-and-label pattern. If you need a status with an icon, build that as a separate composition instead of expecting it from this component.

​
When to use

Use statuses when
  • You need to communicate the state of an item, task, or process
  • A short label and visual marker help users scan dense interfaces faster
  • Status meaning should stay visible in lists, tables, cards, or detail views
  • The state helps users decide what to do next

Do not use statuses when
  • The state is already obvious without an extra indicator
  • The component would repeat nearby text without adding meaning
  • Screen space is too limited for a readable label
  • The UI would become noisy from too many competing statuses

​
Patterns

There are two common status patterns, even though the shipped component focuses on one of them.

Dot status

A dot status pairs a colored circular indicator with a short text label. This is the pattern implemented by bq-status.

Icon status

An icon status uses a symbol instead of a plain dot when the message needs stronger visual emphasis or a more specific cue.

​
Anatomy

BEEQ Status component anatomy
The structure is intentionally small: one indicator plus one label. That keeps the component readable inside compact layouts.
PartElementDescription
1IconThe visual status marker that signals the selected status type
2LabelThe text that describes the status meaning in more detail

​
Design guidelines

Use statuses consistently so people can recognize state changes without pausing to decode the UI.
1

Write the label first

Start with the text. The label should still make sense on its own, because the indicator is only a supporting cue.
2

Keep the indicator supportive

Treat the indicator as a quick visual signal, not the whole message. If you need a more specific symbol, build an icon status as a separate composition.
3

Keep spacing compact and consistent

Place the status close to the row, card, or object it describes, and preserve enough spacing around it so the label and indicator remain easy to scan.
Status labels work best when they are short and stable. Reuse the same wording and color meaning across the product so states remain predictable.

​
Usage

Use the default neutral status when the message should stay present without strong emphasis.
Use this for standard states that do not need positive, negative, or urgent emphasis.

​
Options

Use the type prop to communicate the nature of the status message. Each value maps to a distinct color so states are recognizable at a glance.

​
Alert

Use type="alert" when the message needs immediate attention.
Use this for urgent situations such as service incidents, failed payments, or actions that need immediate attention.

​
Danger

Use type="danger" when the state signals risk, failure, or a blocked condition.
Use this for states such as blocked, overdue, failed, or unavailable.

​
Info

Use type="info" when the status provides neutral or supporting context.
Use this for progress updates, supporting details, or states that should inform rather than warn.

​
Success

Use type="success" when the state confirms a positive outcome.
Use this for completed, approved, delivered, or otherwise successful states.

​
Best practices

DoUse clear labels so the meaning stays understandable even without color.

Don’tDo not rely on the colored dot alone to communicate the state.

DoKeep status wording and color meaning consistent across the product.

Don’tDo not assign different meanings to the same status type in different screens.

DoUse one status per item when possible so the message stays easy to scan.

Don’tDo not stack multiple competing statuses around the same piece of content.

DoPlace the status close to the item it describes so the relationship is obvious.

Don’tDo not separate the status so far from the content that users have to infer what it belongs to.

​
Accessibility

  • bq-status unconditionally renders with role="status" on its wrapper element, so assistive technologies always treat it as a live status message regardless of the type prop.
  • The text label is required for meaning. The colored dot is supportive, not sufficient on its own.
  • Keep labels short and specific so status changes remain easy to understand when announced.
  • This component is informational, not interactive. If users need to act on the message, pair it with a separate button or link.
  • Check contrast and surrounding layout so the label remains readable in tables, cards, and dense data views.

​
API reference

​
Properties

PropertyAttributeDescriptionTypeDefault
typetypeDefines the type of status to display'alert' | 'danger' | 'info' | 'neutral' | 'success''neutral'

​
Slots

SlotDescription
(default)The text label content of the status component

​
Shadow parts

PartDescription
baseThe internal wrapper of the status component
circleThe colored circle that marks the status type
textThe container that holds the text label

​
CSS custom properties

VariableDescriptionDefault
--bq-status-circle--sizeStatus circle size12px
Learn more about styling with shadow parts and CSS custom properties.

​
Resources

Interactive playground

Explore all status variants in Storybook

Source code

View the component source on GitHub