Ballpark UI components examples

Ballpark

An open dropdown menu for sorting a list. The trigger button shows the current sort option, and the menu lists available sort criteria.

• Dropdown menu

Ballpark

A data table displaying a list of team projects with columns for name, responses, last response, date created, and owner. A toolbar above the table includes tabs, search, sorting, and a primary action button.

• Table

Ballpark

A popover displaying an empty state for table sorting, accessed from a toolbar.

• Empty state

Ballpark

A popover overlay containing a filter builder interface. It allows users to construct a filter rule by selecting a field, an operator, and a value. It includes options to add new filters or clear all existing ones.

• Sorting & filtering

Ballpark

A popover menu for building complex filters, featuring property and value selection dropdowns, an add filter button, and a clear all option.

• Sorting & filtering

Ballpark

A progress bar showing the status of remaining cards. It includes a title, a text label indicating the count, and a horizontal bar.

• Progress indicator

Ballpark

A dark-themed toast notification displaying a success message with a checkmark icon.

• Notification Toast

Ballpark

A form for creating conditional logic rules. It includes dropdowns for selecting conditions based on dates and actions to take when conditions are met.

• Query builder

Ballpark

An empty state message indicating no rules have been set up, enclosed in a dashed border. Below the message are two buttons to clear or add rules.

• Empty state

Ballpark

A numeric input field with a label, helper text, and inline minus/plus stepper buttons to adjust the value.

• Input number

Ballpark

A popover menu containing a list of configuration options, each with a title, description, and a toggle switch.

• Toggle/Switch

Ballpark

A drag-and-drop file upload area for images, featuring an illustration of image files, a primary instruction, and supported file types and size limits.

• File upload input