Sizes

Components that support sizing have a size attribute with 5 available values: xl, lg, md, sm and xs.

#Inheritance

Sizes are inherited from containers like <x-card>, <x-div> and <x-table> to components.

#Default behavior

When no size is specified on the component nor on its parent container, the behavior is as follows:

• The control itself is rendered as if size="md"

• The label's font size is inherited.

Ultimately, you can control the font size of the label independently from the size of its attached control.

Here is a comparison between controls explicitly set to a size and the default behavior in-between. Controls are placed in a div with the text-xl class, which will become the default size for labels.