MYDS Logo

    MYDS

    Beta

    Task list

    Allows to feed information or call to action in a structured way. Shows all user tasks, making it easy to distinguish between completed and pending items.

    task-list-anatomy.pngtask-list-anatomy.png

    1. Title: Provide the task title.
    2. Hint text: Clearly and briefly describe the task requirements.
    3. Status (Completed): Use UI/Tag component
    4. Status (Incomplete): Use UI/Tag component

    State

    task-list-state.pngtask-list-state.png

    1. Default: No background fill by default.
    2. Hover: Add bg-gray-50 when hover and underlined the title

    Usage example

    Grouping tasks

    If there are many tasks to complete, grouping them can help users better understand and plan their next steps. You can organize tasks into separate task lists on a page, with each list having a clear, concise heading that explains the group.

    task-list-usage.pngtask-list-usage.png

    1. Tasks group title

    On this page