Buttons are one of the most common and basic user interface elements. Buttons supports four appearances: text, outlined, tonal, and filled; and three colors: primary, error, and neutral. Combining appearances and colors gives you 12 different variants. By default, a button has no color. To add colors, you can use CSS classes like flexy-button--primary or flexy-button--tonal-primary.

Checkboxes are used to toggle binary options or properties. Although switches are typically preferred for on/off states, checkboxes can be more appropriate when multiple selections or partial states are involved.

Menus are just like the context menu you often see in most web browsers and applications. They are really helpful components because they don’t take up any permanent space on the UI; they are hidden until the user clicks the related anchor element.

A progress bar can be used to display the progress of an action or task (e.g., download progress). Progress bars should be read-only for users. A progress bar can be either determinate or indeterminate. In the determinate state, its value can be defined using aria-valuenow between 1 and 100. Indeterminate progress should be used only when the estimated time of the task cannot be calculated.

A progress circle can be used to display the progress of an action or task (e.g., download progress). progress circles should be read-only for users. A progress circle can be either determinate or indeterminate. In the determinate state, its value can be defined using aria-valuenow between 1 and 100. Indeterminate progress should be used only when the estimated time of the task cannot be calculated.

Radios are similar to checkboxes, but unlike checkboxes, you can only select one option from a set of options.

A slider allows quickly selecting a value from a range. Common uses include seeking through audio or video, changing a volume level, or setting values in image editors.

Switches can be used for controlling features, settings or hardware that have a clear on/off logic.

Tabs let you organize multiple views within a single container and display one view at a time. By default, a bottom-line indicator is used to show the selected tab, but a fill color can also be used instead.

Text fields are very important components in a UI; they can be used to accept different kinds of information from users. The design of the text field is inspired by Material UI with some changes.

Tooltips are used primarily to display additional information regarding a UI element when it’s hovered or focused. Tooltips can be used on every UI. element.

A tooltip appears only when the user hovers over its corresponding element or if that element has focus.

Normally, when you use a tooltip, you have to give an ID to the tooltip element and mention that ID within the aria-describedby attribute of its corresponding element.

If you don’t want to set the ID manually, you can place the tooltip element as the next sibling element of its associated element. The id and aria-describedby attributes will automatically be generated once the component is initialized.