Buttons

Type
Example
Source code
Regular / primary Secondary Discrete Disabled Icon left Icon right Icon only Icon only, discrete Form button
Button group
Cool usecase
Danger button Warning button

Inputs

Type
Example
Source code
Text Search Email Password Textarea File input Select Range Autocomplete 
<input type="text" list="items" />
<datalist id="items">
  <option>Lorem ipsum</option>
  <option>dolor sit</option>
  <option>amet</option>
</datalist>
Date Disabled Invalid Checkbox Radio Switch

Icons

RC Components uses Font Awesome v5 (Pro). For a full list of avaiable icons see: https://fontawesome.com/v5/search

Type
Example
Source code
Icon

Tabs

When using tabs on a different background colour than --surface-1: set --background-color to that background-color on .tabs.

Type
Example
Source code
Tabs only
General
Account
Disabled
With icons
General
Account
Disabled

Modals

Type
Example
Source code
Body only Body and footer Header, body and footer With close button

Tooltips

Warning: when you set the `data-tooltip` property on an element, it will get `position: relative`. This might cause unexpected behaviour but can easily be overriden of course.

Type
Example
Source code
Simple tooltip

Hover over me

Toasts

Also known as a snackbar or simply notification. Toasts should only contain non-crucial information and should always dissapear automatically, with or without an action. TODO make them stack

Type
Example
Source code
Text only With action