Button

Buttons are everywhere on the web. They represent actions that user can take. Use Nova's custom button styles to use them in forms, modal, etc.

Contained Buttons

They are filled buttons and mostly useful for primary action in your web page. Use our predefined classes .btn along with varients classes like .btn--contained-primary to create such buttons.

expand_more

<button class="btn btn--contained-primary">
  <span class="btn__content">Primary</span>
</button>
<button class="btn btn--contained-secondary">
  <span class="btn__content">Secondary</span>
</button>
<button class="btn btn--contained-warning">
  <span class="btn__content">warning</span>
</button>
<button class="btn btn--contained-success">
  <span class="btn__content">Success</span>
</button>
<button class="btn btn--contained-danger">
  <span class="btn__content">Danger</span>
</button>

Outlined Buttons

In case you don't need primary action button everywhere then, you can use outlined button for a secondary action in your web page. Replace varient class .btn--contained-primary with class .btn--outlined-primary for creating outlined buttons.

expand_more

<button class="btn btn--outlined-primary">
  <span class="btn__content">Primary</span>
</button>
<button class="btn btn--outlined-secondary">
  <span class="btn__content">Secondary</span>
</button>
<button class="btn btn--outlined-warning">
  <span class="btn__content">warning</span>
</button>
<button class="btn btn--outlined-success">
  <span class="btn__content">Success</span>
</button>
<button class="btn btn--outlined-danger">
  <span class="btn__content">Danger</span>
</button>

Text Buttons

Text buttons can be created using varient class .btn--text

expand_more

<button class="btn btn--text">
  <span class="btn__content">Primary</span>
</button>
<button class="btn btn--text">
  <span class="btn__content">Secondary</span>
</button>

Link Buttons

Link can lead you to a diffrent page while button denotes action. You can style a link as a button using our predefined classes.

Primary Secondary Secondary

expand_more

<a href="#" class="btn btn--contained-primary btn--center">
  <span class="btn__content">Primary</span>
</a>
<a href="#" class="btn btn--text btn--center">
  <span class="btn__content">Secondary</span>
</a>
<a href="#" class="btn btn--center btn--outlined-danger">
  <span class="btn__content">Secondary</span>
</a>

Icon Buttons

Create these cool looking icon btn using class .btn--icon.

expand_more

<button class="btn--icon btn--center">
  <span class="material-icons">delete</span>
</button>
<button class="btn--icon btn--center">
  <span class="material-icons">check</span>
</button>
<button class="btn--icon btn--center">
  <span class="material-icons">shopping_cart</span>
</button>
<button class="btn--icon btn--center">
  <span class="material-icons">clear</span>
</button>
<button class="btn--icon btn--center">
  <span class="material-icons">favorite</span>
</button>

Floating Action Buttons

Floating action buttons are diffrent than usual buttons. They are used for primary action user can take. Use our varient class .btn--floating to create such buttons.

expand_more

<button class="btn--floating btn--center">
  <span class="material-icons">add</span>
</button>
<button class="btn--floating btn--center">
  <span class="material-icons">edit</span>
</button>
<button class="btn--floating btn--center">
  <span class="material-icons">expand_less</span>
</button>