My Design System

The Button component allows users to perform actions. See Button

Confirm Dialog is a modal Dialog used to confirm user actions. See Confirm Dialog

Context Menu is a component that you can attach to any component to display a context menu. See Context Menu

List Box allows the user to select one or more values from a scrollable list of items. See List Box

Login is a component that contains a login form. You can use it for authenticating the user with a username and password. See Login

Menu Bar is a horizontal button bar with hierarchical drop-down menus. See Menu Bar

Notifications are used to provide feedback to the user. See Notification

Progress Bar shows the completion status of a task or process. See Progress Bar

Accordion is a vertically stacked set of expandable panels. See Accordion

The Details component is an expandable panel for showing and hiding content from the user to make the UI less crowded. See Details

Dialog is a small window that can be used to present information and user interface elements in an overlay. See Dialog

Tabs are used to organize and group content into sections that the user can navigate between. See Tabs

Scroller is a component container for creating scrollable areas in the UI. See Scroller

Virtual List allows you to render a long list of items inside a scrollable container without sacrificing performance. See Virtual List

Avatar is a graphical representation of an object or entity, for example a person or an organisation. See Avatar

Badges are colored text elements containing small bits of information. See Badge

CRUD is a component for managing a dataset. It allows for easy displaying, editing, creating, and deleting of items. See CRUD

Grid is a component for showing tabular data. See Grid

Grid Pro is an extension of the Grid component that provides inline editing with full keyboard navigation. See Grid Pro

Message List allows you to show a list of messages, for example, a chat log. See Message List

Tree Grid is a component for displaying hierarchical tabular data grouped into expandable and collapsible nodes. See Tree Grid

Checkbox is an input field representing a binary choice. See Checkbox

Combo Box allows the user to choose a value from a filterable list of options presented in an overlay. See Combo Box

Custom Field is a component for wrapping multiple components as a single field. See Custom Field

Date Picker is an input field that allows the user to enter a date by typing or by selecting from a calendar overlay. See Date Picker

Email Field, an extension of Text Field, only accepts email addresses as input. See Email Field

Message Input allows users to author and send messages. See Message Input

Number Field sports many of the same features as Text Field but only accepts numeric input. See Number Field

Password Field is an input field for entering passwords. See Password Field

Radio Button Group allows the user to select exactly one value from a list of related but mutually exclusive options. See Radio Button

Rich Text Editor is an input field for entering rich text. See Rich Text Editor

Select allows users to choose a single value from a list of options presented in an overlay. See Select

Text Area is an input field component for multi-line text input. See Text Area

Text Field allows the user to input and edit text. See Text Field

Time Picker is an input field for entering or selecting a specific time. See Time Picker

Upload is a component for uploading one or more files. See Upload

App Layout is a component for building common application layouts. See App Layout

Vaadin features two basic layout components: Vertical Layout and Horizontal Layout. See Basic Layouts

Board is a powerful and easy to use layout element for building responsive views. See Board

Form Layout allows you to build responsive forms with multiple columns and to position input labels on top or to the side of the input. See Form Layout

Split Layout is a component with two content areas and a draggable split handle between them. See Split Layout