# Text Button

## Anatomy

<img src="/images/uxd/text-button.png">

A text button typically comprises the following elements:
- **Label:** The visible text displayed on the button, indicating its function or action.
- **Leading Icon:** An optional icon positioned before the label, providing additional context or visual cues.
- **Trailing Icon:** An optional icon positioned after the label, indicating supplementary actions or functionality.
- **Notification Bubble:** An optional indicator placed on the button, typically denoting unread messages or notifications.

## Usage

Text buttons are ideal for scenarios where a more subtle, link-like appearance is desired while still maintaining interactive affordance. Here are some usage guidelines:

### Dos

- **Use for Non-Destructive Actions:** Employ text buttons for actions that are non-destructive or have minimal impact, such as navigation or secondary actions.
- **Provide Clear Labels:** Ensure button labels are concise and descriptive, clearly indicating the action or function they perform.
- **Consider Icon Usage:** Utilize leading and trailing icons judiciously to enhance usability and provide additional context to button actions.
- **Include Notification Bubbles Sparingly:** If using notification bubbles, do so sparingly and only for relevant actions or updates.

### Don'ts

- **Avoid Ambiguous Labels:** Refrain from using vague or ambiguous labels that may confuse users about the button's function.
- **Overuse of Icons:** Avoid overloading text buttons with excessive icons, as this can clutter the interface and reduce clarity.
- **Excessive Notification Bubble Usage:** Avoid cluttering the interface with too many notification bubbles, as this can distract users and diminish their effectiveness.