Button

The button is an essential element of any design. It's meant to look and behave as an interactive element of your page. They are typically placed throughout your UI, in places like: cards, forms, appbar or dialogs.

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

Nova has 3 types of button: reset, submit and button.

Nova has 2 types of button: classic and call to action (cta) and for each there are 3 levels of hierarchy: 1, 2, and 3.

You can add an icon before or after the button text. If the button only contains an icon, use nv-btn-icon to make sure the button remains a circle.

The button is available in all the different colors defined by the official brand guideline for Nova's colors. They are 5 main UI colors: primary, secondary, warning, error and success.

The button comes in 5 different sizes: extra small, small, normal, large and extra large.

(Classic buttons got xs, sm, md and CTA buttons got md, lg, xl)

States are visual representations used to communicate the status of a component or interactive element. Nova styles the different states of its buttons. Each state is available as a pseudo-class or CSS class:

A disabled state communicates when a component or element isn’t interactive, and should be deemphasized in a UI.

You can very easily turn a button into its loading version by appending the nv-btn-loading modifier. You don't even need to remove the inner text, which allows the button to maintain its original size between its default and loading states.