DOCSEARCHbyAlgolia
Submit Docs

Garden Design System

website·Indexed 19 days ago

https://garden.zendesk.com/

Documentation for Zendesk's Garden design system, providing development instructions, components, and design patterns for building user interfaces. Includes a comprehensive component library (such as Buttons, Modals, Tables, and Tabs), an icon library, theme providers, and guidance on interaction patterns like drag-and-drop, error handling, and rich-text editing.

Tokens
37.7K
Snippets
180
Records
366
Agent score
98%

What's inside Garden

  1. Overview of the SplitButton component

    A Split button is a hybrid between a Dropdown Menu and a Button. It is used to let users select from multiple parallel actions (where each represents a path forward and none cancel the action) or to reduce visual complexity when multiple actions are available.

    Do not use a Split button for page navigation (use Anchor) or to choose between a primary and secondary action (use two separate Buttons).

  2. Overview of the Garden Combobox component

    The Combobox is a composite input consisting of a text field and a listbox. It is designed to help users filter through a large list of options and make a selection.

    Use cases:

    • Filtering down a large set of options.
    • Making a selection from a predefined list.

    Constraint: For picking options on mobile devices, use the Select component instead of the Combobox.

  3. Overview of the InputGroup component

    The InputGroup component combines a Button and an Input to allow users to take quick actions on entered information (e.g., selecting or copying data in a field). It should not be used for submitting forms; in those cases, Buttons and Inputs should be kept separate.

  4. Overview of the Global Alert component

    The Global Alert provides system-wide feedback and updates. It is placed as the first element of a page, pushing content down, and remains persistent until the user dismisses it or the issue is resolved.

    Use cases:

    • Announcing new product versions
    • Informing users of trial status
    • Indicating editing mode
    • Communicating system maintenance or server disconnections

    Avoid using for:

    • Contextual feedback about a specific action or task (use the Alert component instead).

  5. Overview of the Tooltip Dialog component

    A Tooltip Dialog provides contextual information about a paired element and can be opened automatically or via user action. It is specifically intended for scenarios where user action is required within the tooltip or where a focus loop is needed for internal actions. For read-only information displayed on hover, use the standard Tooltip component instead.

  6. Overview of the Timeline component

    The Timeline component is used to list events over a period of time, such as tracking an issue or showing events associated with an item. It should not be used for step-by-step processes; use a Stepper component for that purpose instead.

  7. Overview of the Toggle Icon Button

    The Toggle Icon Button is used to turn a setting or action on and off (similar to a light switch). It is ideal for repeated or persistent actions on a page, such as making text bold or enabling toolbar actions, where a visible label is omitted to simplify the UI. It should not be used for selecting from a list of settings (use Checkboxes) or when both an icon and a label are required (use a Button with an icon).

  8. Overview of the Drawer component

    A Drawer is a container for supplementary content anchored to the edge of a page. It is typically used to display information or actions supplementary to the primary screen content, or to provide a list of actions that affect the screen's content, such as data filtering. When a Drawer opens, keyboard focus is moved into the Drawer and trapped there until the component is dismissed.

  9. Overview of the Garden Design System

    Garden is the central source of truth for tools, standards, and best practices used to build products at Zendesk. It serves as a shared library integrating design, content strategy, and engineering to ensure a cohesive user experience across the Zendesk product suite. The system is organized into three primary areas: Design Foundations for purposeful UI, Component development instructions for building user interfaces, and UI Patterns which provide opinionated design recipes combining best practices from content, design, and engineering.

  10. Overview of the Tiles component

    Tiles are radio buttons styled with icons or images. They are used for mutually exclusive choices where only one option can be selected at a time.

    Use Cases:

    • Use Tiles when you need a visual, icon-based selection for mutually exclusive options.
    • Use Checkboxes if multiple options can be selected.
    • Use a Combobox for long lists of options.
    • Use a Button for actions or an Anchor for navigation.

  11. Overview of the Garden Theme object

    The Theme object provides global values for component styling. It is primarily used to toggle between light and dark themes or to serve as the baseline for a customized Theme provider.

    Important Usage Note: Do not use the Theme object directly to reference component styling values in your code; instead, use the theme API via the Theme provider or the useTheme hook.