Buena UI components examples

Buena

A horizontal row of controls for filtering data, consisting of a search icon button and three dropdown menus for Type, City, and Services.

• Sorting & filtering

Buena

A horizontal toolbar containing a search icon button, two dropdown filters for 'Rental contract ends' and 'Archive', and a 'Clear filters' text button.

• Sorting & filtering

Buena

A pill-shaped badge displaying a date alongside an image icon.

• Badge

Buena

A data table displaying a list of tenancies with columns for salutation, first name, last name, email, phone, move-in date, and move-out date. It includes a header with a title and an add button.

• Table

Buena

A pill-shaped toast notification indicating a successful data update, featuring a green checkmark icon and white text on a dark background.

• Alert

Buena

A radio group with two options, 'Limited' and 'Unlimited', presented as selectable cards.

• Checkbox & radio

Buena

A standard select input field with a label, currently displaying a selected value.

• Input select

Buena

A vertical list of checkbox options for selecting included amenities, styled as full-width rounded cards.

• Checkbox & radio

Buena

An expanded dropdown menu for selecting a unit's condition, with the first option highlighted.

• Dropdown menu

Buena

A card prompting the user to add required missing data, featuring a warning badge, title, description, and an action button.

• Card

Buena

A page header displaying a breadcrumb navigation trail above a large page title.

• Breadcrumb

Buena

A horizontal row of navigation tabs used to switch between different sections of a property unit detail page. Some tabs include notification badges with numeric counts.

• Tabs