Buttons are components user can click to perform an action and interact with the website.
Elixir offers the following range of buttons - Dark Buttons, Light Buttons, Primary Buttons, Secondary Buttons, Floating Action Buttons, and Disabled Buttons.
To generate a dark button, use the base class btn. Dark buttons are the default themed button. The button generated is a solid one.
To use variations of a dark button, add any of the following supporting classes to on top of the base class and button theme class-
btn-outline, btn-link, btn-icon, and btn-text-icon.
Copy the code below to use dark buttons of different variations.
To generate a light themed button, use the base class btn along with the support class btn-light. The default button generated is of the type solid.
To use variations of a dark button, add any of the following supporting classes to on top of the base class and button theme class-
btn-outline, btn-link, btn-icon, and btn-text-icon.
Copy the code below to use light buttons of different variations.
To generate a primary button, use the base class btn and add the theme class btn-primary. By default, the type of button generated is a solid one.
To use variations of a primary button, add any of the following supporting classes to on top of the base class and button theme class-
btn-outline, btn-link, btn-icon, and btn-text-icon.
Copy the code below to use primary buttons of different variations.
To generate a secondary button, use the base class btn and add the theme class
btn-secondary
. By default, the type of button generated is a solid one.
To use variations of a secondary button, add any of the following supporting classes to on top of the base class and button theme class-
btn-outline, btn-link, btn-icon, and btn-text-icon.
Copy the code below to use secondary buttons of different variations.
Floating action buttons are used to perform primary or common actions on the screen. Circular in shape, they remain fixed on the bottom right corner of the screen and float on top of all content.
To use a floating action button, add the class
btn-floating
along with the base class btn.
Copy the code below to use a floating action button.
To disable any button add the attribute disabled along with the class btn-disabled on any type of button.
Copy the code below to use disabled buttons of different variations.