Status
The Status component is used to display a status or indicator that can be used to visually indicate different states in the application. For example, user login status, network connection status, or other indicators that are important to the user interface.
It can also be customized by setting different sizes or types to suit the needs of the application design.
Basic use
This example shows the status component in its simplest form, as a short state indicator without additional supporting content.
Slots
This example shows how to add extra content to status through slots, such as an icon or supporting text.
Size
This example shows how changing size affects the layout and visual hierarchy of the wje-status component.
Status types
This example shows how to display a status indicator or supporting status content with the wje-status component.
When to use
Use wje-status to communicate status, result of actions, or required next steps immediately.
When not to use
Do not show multiple feedback channels for the same event unless there is a strong reason.
Accessibility
Announce status updates with suitable ARIA live regions and manage focus for modal interactions.
Best Practices
- Match message severity (info/success/warning/error) to actual user impact.
- Use confirmations only for destructive or hard-to-reverse actions.
- Keep timeouts consistent so users have enough time to read messages.
Attributes and Properties
No properties available for this component.
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native part of the status. |
bullet | The bullet part of the status. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
default | Default slot for the main component content. |
start | The status start content. |
end | The status end content. |