# Emptystate

## Usage

**Use Empty State to:**

- Provide clear messaging that explains why the page or section is empty.
- Offer actionable guidance, such as a primary button that allows users to add or fetch content.
- Maintain a positive and helpful tone to reassure users and guide them forward.
- Indicate a successful state when there is no further action needed (e.g., all tasks completed).
- Use a simple and visually supportive icon or illustration to enhance understanding.

**Do not use Empty State to:**

- Display generic “No data available” messages without explanation or next steps.
- Show empty sections without visual or textual feedback.
- Rely only on an illustration without supporting text—users need clear instructions.
- Use success states without confirming what was achieved or providing reassurance.
- Replace error handling—errors should have their own dedicated error messages.

## Other Considerations

**Content Best Practices**
- Keep messages concise but informative. Avoid overly technical language.
- Use a friendly and reassuring tone, especially in success states.
- If an action is possible, provide a clear call to action (e.g., “Add new record”).
- If no action is needed, confirm the state (e.g., “You’re all caught up!”).

**Visual Guidelines**
- Use a relevant and minimal icon to illustrate the state.
- Ensure the icon and text are balanced to avoid unnecessary visual weight.
- Maintain visual consistency across different empty state use cases.

## Example use case
- A user has not yet created or received any content (e.g., no submitted timesheets).
- A search or filter does not return any results.
- An error prevents content from being displayed.
- A process has been completed successfully, and the state confirms the outcome (e.g., “All tasks completed”).

## Design Rationale
- Clarity: Users should immediately understand why they see an empty state.
- Guidance: The UI should help users take the next logical step if needed.
- Consistency: Keeping a standard empty state approach avoids confusion.
- Reassurance: Using a positive tone prevents frustration, especially in success states.