Density

Density refers to the amount of vertical white space a component has, as well as the height of the main (interactive) element of a component.

We offer three levels of density - compact, default and cozy - onyx provides a flexible toolkit to build applications for multiple user preferences and device capabilities. The three densities are always based around the specific values of 32px, 40px, and 48px.

Compact

This is ideal for users, who prefer a more condensed layout. Compact density maximizes the amount of information displayed on the screen. It's particularly beneficial for offering an efficient use of limited space.

Default

Striking a balance between information density and visual comfort, default component density is the standard that caters to a broad user base and is recommended to most of the applications. It ensures a comfortable and intuitive experience for users across various devices and screen sizes.

Cozy

Designed for users who appreciate a more spacious and visually relaxed interface, cozy density introduces plenty of whitespace between and inside elements. This level of density enhances readability and provides visually appealing experience, suitable for users who prioritize on a more leisure interaction.

Properties

The density can be easily switched via the density property of supported components. Please take a look at the components for further information.