Skip to main content

Controls

Common states and interactivity of elements that react to user action.

Controls refer to any UI element a user can interact with. They vary greatly in shape and purpose but share many commonalities described below.

Size​

Quartz defines three main sizes for all controls: small, standard, and large. Those sizes are used consistently across the whole design system.

Controls of the same size will display nicely together. Do not mix sizes between them.

The standard size​

Most controls on the screen use the standard size. This is the reference size that must be used by default.

The small size​

The small size should only be used in the following specific contexts:

  • TO BE DEFINED

The large size​

The large size should only be used in the following specific contexts:

  • TO BE DEFINED

Importance​

Some controls follow the importance transversal principle when relevant:

The button control follows the transversal "importance" principle.

Spacing​

Controls are spaced according to their size, independently from their context of use. This ensures a visually balanced spacing.

In Figma​

In code​

Quartz provides utility classes for spacing controls:

  • qds-controls for standard-size controls
  • qds-controls-small for small-size controls
  • qds-controls-large for large-size controls

By default, they apply a flex column layout with the unrelated amount of spacing. You can use the optional Tailwind utilities to adjust the layout to your needs.

Combine them with the qds-related and qds-unrelated classes to define the spacing relationship of the controls:

Loading...
Live Editor
<div class="qds-controls w-full flex-row justify-between">
  <qds-button importance="subdued" text="Options..."></qds-button>
  <div class="qds-controls qds-related flex-row">
    <qds-button importance="emphasized" text="Confirm"></qds-button>
    <qds-button text="Cancel"></qds-button>
  </div>
</div>

Layout​

Laying out controls is very specific to the context. See the Design patterns section for examples and layout templates that help you save much time.

Last updated on