Output core button styles and sizes
Demos
Primary Button
The default button style for main actions.
<div class="demo-theme-box demo-width-small">
<button class="button">Primary Button</button>
</div>Secondary Button
An alternative style for less important actions.
<button class="button button--secondary">Secondary Button</button>Small Button
A smaller button variant.
<button class="button button--small">Small Button</button>Large Button
A larger button variant.
<button class="button button--large">Large Button</button>Left Aligned Button
A button with its content aligned to the left, useful when the button spans a larger width.
<button class="button button--left" style="width: 100%;">Left Aligned</button>Variables
$config
Variable Type: Map
Module Settings
$config: (
"icon-centered-vertical-offset": true
);File Information
- File: _button.scss
- Group: button
- Type: variable
- Lines (comments): 19-20
- Lines (code): 22-24
Mixins
set()
Mixin
Change modules $config
File Information
- File: _button.scss
- Group: button
- Type: mixin
- Lines (comments): 26-29
- Lines (code): 31-33
Examples
@include ulu.component-button-set(( "property" : value ));Parameters
| Name | Type | Description |
|---|---|---|
| $changes | Map |
Map of changes |
Require
styles()
Mixin
Output button component styles
File Information
- File: _button.scss
- Group: button
- Type: mixin
- Lines (comments): 45-49
- Lines (code): 51-110
Examples
@include ulu.component-button-styles();<a class="button" href="#">Button Default</a>Preview
Require
Functions
get()
Function
Get a config option
File Information
- File: _button.scss
- Group: button
- Type: function
- Lines (comments): 35-38
- Lines (code): 40-43
Examples
@include ulu.component-button-get("property");Parameters
| Name | Type | Description |
|---|---|---|
| $name | Map |
Name of property |