DOCSEARCHbyAlgolia
Submit Docs

Bright UI Design System

website·Indexed 31 days ago

https://ui-docs.bright.hr

Documentation for the Bright UI kit, providing designers and developers with guidelines on foundations, design patterns, and accessible components. Includes detailed specifications for components such as modals, date pickers, tables, and progress bars, as well as standards for WCAG text legibility, color tokens, and writing style.

Tokens
29.2K
Snippets
27
Records
257
Agent score
51%

What's inside Bright UI

  1. Implement the Accordion component

    The Accordion component is used to group related long content into sections that are shown one at a time, supporting progressive disclosure and preventing users from being overwhelmed by large amounts of information.

  2. Understand the Context Menu component structure

    The Context Menu component consists of two primary sub-structures:

    1. Trigger: The interactive area (responding to tap, click, etc.) that opens the menu. It may include an optional text label (defaulting to "Actions") to provide context and accessibility for screen readers.
    2. Menu: A list of actions to be performed. Each menu item contains a label, an optional icon, and an optional description. Menu items can be organized into operational groups, and each item must have a target size sufficient for accurate selection via mouse or touch.

  3. Understand the Toast component structure and usage

    A Toast is used to display short, temporary system messages resulting from a user's action. It consists of a Container, a Message (text content), and a Dismiss button.

    When to use:

    • To display temporary short messages.
    • To provide immediate feedback/reaction to user input.

    When NOT to use:

    • Use an Alert if the message must remain on screen or requires an action.
    • Use a Modal if an action is required before the user can continue.

  5. Employee Picker component overview

    The Employee Picker is used to select one or multiple employees to be associated with an entity, such as a rota or a team. It is typically displayed within a modal and supports filtering by name or team, bulk selection via 'Select all' or team-specific links, and organized grouping via accordions.

  6. App Bar Mobile component overview

    The App Bar is a persistent top-level UI component for mobile screens used to display contextual information and provide quick access to primary and secondary actions. It ensures consistency across the app experience and typically consists of navigation controls, a title, a subtitle, and trailing actions.

  7. Button Link component structure

    The Button Link is used to display a single, less important action. It consists of two main elements:

    • Text: Conveys the action message relevant to the button.
    • Icon (optional): Supports or communicates the text; can be aligned to the left or right.

  8. Implement the Progress Bar component

    Use the Progress Bar to provide visual feedback on the completion of a linear task or process (e.g., file uploads, form completion, or multi-step processes). It consists of a container (outer boundary), a fill (colored indicator), and an aria-label for screen readers.

  9. Write content for information tips

    Explanatory content in information tips must be as concise as possible while clearly explaining the value or concept. Avoid jargon and complicated language, ensuring the text adheres to the established brand tone of voice and style.

  10. Understand the Tag component structure

    The Tag component is used for labels that can optionally be selected, unselected, or removed. It consists of three primary structural elements:

    • Label: Describes the meaning of the tag.
    • Count: An optional numeric indicator showing the number of items associated with a filter.
    • Remove Icon: An optional element that allows the user to remove the tag.

  11. Implement a Stepper component for incremental changes

    The Stepper component allows users to make incremental changes to a counter without requiring direct text input. It is best used when users need to change small amounts of a value within a separate context.

    A standard Stepper consists of three primary elements:

    1. Value: Displays the current numeric value (can optionally be a direct text input).
    2. Decrement controller: A control to decrease the value.
    3. Increment controller: A control to increase the value.

  12. Badge component overview and usage guidelines

    The Badge component presents short, relevant information that needs to be distinguished from the rest of the display. It is primarily used to call attention to details for easy scanning or to present status and category information.

    When to use:

    • To highlight details for scannability.
    • To present status or category information.
    • To differentiate items from one another.

    When NOT to use:

    • If the entire message has an associated action, use an Alert component instead.
    • If the indicator can be removed or replaced, use a Tag component instead.

    Accessibility Requirement: A badge's meaning must not be communicated by color alone.