# Component-specific best practices

Review the guidance below to ensure your application's [table displays](#tables-and-lists), [button groups](#button-groups), and [search functionality](#searching-and-filtering) follow Workshop design best practices.

## Tables and lists

When adding [Object Tables](../widgets-object-table/index.md), [Object Lists](../widgets-object-list/index.md), or [Pivot Tables](../widgets-pivot-table/index.md) to your application, you should practice the following:

* Always include counts to indicate the length of tables and lists by configuring a [Metric Card](../widgets-metric-card/index.md) widget in the table's section header. Choose **Tag** as your layout style.

![A Metric Card is configured to render a count of objects in an Object Table.](../../../assets/a7dc70949b4ba99884bda4494b22270d42d0f98f3cb3aeb0fd0e47460e8aa6bc.webp)

* Ensure each section renders enough information for row selection; use [collapsible detail panels](../getting-started/index.md#part-iv-configure-a-collapsible-panel-for-the-object-view) for additional data instead of overlays, which can obstruct the base layer of information.

![A sample Workshop application displays a collapsible side panel containing an object view.](../../../assets/f939e40e3f28e99682b857027f690e74daaa43bf0ec7014dc16de6080e8fd9ab.webp)

* Validate that your table or list adheres to Workshop's [scrolling best practices](../application-design-best-practices/index.md#scrolling-best-practices).
* Use the **Display & formatting** section of the **Widget setup** panel to customize your table's display.

## Button groups

When adding a [Button Group](../widgets-button-group/index.md) to your application, you should practice the following:

* Ensure each button clearly guides user actions by matching its color to the user's mental model of the accompanying action's outcome or risk. Review the available [button color options](../widgets-button-group/index.md#button-configuration-options) and apply the appropriate color based on the button's **Intent**.
  * **None:** Renders a gray hue; best used for secondary actions.
    * *Examples:* `Back`, `Skip`, or `Cancel`.
  * **Primary:** Renders a blue hue; best used as the main call to action or to advance the user's journey in your application.
    * *Examples:* `Create`, `Add new`, `Next`, or `Continue`.
  * **Success:** Renders a green hue; best used for completion actions or those denoting a positive outcome.
    * *Examples:* `Submit`, `Save`, `Complete`, `Approve`, or `Enable`.
  * **Warning:** Renders an amber hue; best used for actions that require a user's attention or awareness but are not destructive. The actions may also denote moderate risk.
    * *Examples:* `Review required`, `Pending approval`, `Archive`, or `Suspend`.
  * **Danger:** Renders a red hue; best used for destructive actions that cannot be easily undone. You can also use **Danger** for error states or critical alerts.
    * *Examples:* `Delete` or `Remove`.

* Add icons to buttons to help users understand their backing actions. Additionally, you should organize buttons from left to right based on their importance and visual load, with each button group containing a primary action. Refer to the table below for specific examples.

| Button purpose                                                                                                                                  | Best practice                                                                                                                 |
| ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| Use the first button in a group to denote the primary action. De-emphasize other actions with a menu to reduce visual clutter.                  | ![A button group with a primary action and menu of secondary actions.](../../../assets/7f26fff8d311d78096c3376d52312f8274cf240a2347db9d432ccf50c5fe033f.webp)                  |
| Use icons to inform a user of the button's action and what will occur after selection.                                                          | ![An Add button with two icons.](../../../assets/566419a2c28481b6a16db225ace58a3ebbb0b6aff700f30525ad1e969623a2b7.webp)                                                        |
| Apply arrow icons to show navigation to a new page/section within the module (horizontal arrow) or a new tab outside the module (angled arrow). | ![Buttons with arrows indicate tab or window navigation.](../../../assets/d1175cb81b3c51e7f11c5f2e106c8924a33059187fc7e68f34ca6394d1d6a55e.webp)                       |
| Group buttons to indicate if there are other actions related to a button (**+**) or other independent actions accessible from a menu.           | ![Buttons with a plus sign and ellipsis indicate related or more nested actions exist.](../../../assets/38ceea75f2c5ec0fcf28a45e2ba781ca9db4019380b785a0dc6b4883b49ba5b8.webp) |

* Label your buttons using natural, user-friendly language in sentence case. Avoid repetitive copy when adding a Button Group to a section header where the context is clear.

![A Do and Do not comparison of button copy examples is displayed.](../../../assets/23f7c22e6e8f866fbce10bd674993debb3d641f3f8b2a9de1ed167acc9b09627.webp)

* Add buttons in close proximity to their related section or widget. As an example, if you configure two Object Table widgets which render `Equipment` and `Part` objects, then you should add buttons with their relevant actions to each Object Table's specific header.

![A Do and Do not comparison of button alignment to Object Table section headers.](../../../assets/010e51a6acf631cefd5c3e6ca3794c21e34453467c712d8461311e8e1d898be5.webp)

* Organize buttons hierarchically by adjusting their size, border, and color intensity in the **Display & formatting** section of the **Widget setup** panel.

* Do not apply distinct colors to *every* button, as this can create visual clutter and distract users. Instead, you should identify the primary action within a button group and assign the corresponding color.

| 🔴 Avoid multiple colors in one group                                          | 🟢 Best practice                                                                           |
| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| ![A button group with multiple colors applied.](../../../assets/85962391c01e249099ccd2738b5fbfcaf348f8e18619b397998cd47facdcdd4f.webp)  | ![A button group with one color applied.](../../../assets/48c7c73082e45146ff651ea2beb4fad9d2654a00d74524cb9dd3d7f44294d865.webp) |

[Learn more about the Button Group widget.](../widgets-button-group/index.md)

## Searching and filtering

When adding [one of Workshop's filtering widgets](../widgets-filtering/index.md) to your application, such as [Filter List](../widgets-filter-list/index.md) or [Exploration Filter Pills](../widgets-exploration-filter-pills/index.md), practice the following:

* Use a Filter List's **Vertical** filter layout if the object list requires users to apply multiple filters simultaneously. This layout is also best used for complex filtering scenarios and provides a clear overview of available filtering options.

![A filter list with a vertical layout is displayed.](../../../assets/84d1b16fc01f700a2e1c50f7ade5e3aaded806b6ed0c07206d19a96955a2d2d5.webp)

* Use a Filter List's **Pills** filter layout for compact, beginner-friendly visual filtering. The **Pills** layout is ideal for limited screen space or frequent filter changes. You can also use the Exploration Filter Pills widget for this same purpose.

![A filter list with a pills filter layout is displayed.](../../../assets/33a29e96452669e7693f7447711609f624a15fb98850aa0d11b8a1bba947fe20.webp)

* Add an [Exploration Search Bar](../widgets-exploration-search-bar/index.md) to enable comprehensive searches with complex filtering capabilities. This is best suited for experienced users requiring detailed, precise querying functionality. The Exploration Search Bar supports keyword searches, property filtering, and complex queries.