Button
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>Variables
$config
Variable Type: Map
Module Settings
$config: (
"icon-margin" : 0.5em,
"icon-centered-vertical-offset": true
);File Information
- File: _button.scss
- Group: button
- Type: variable
- Lines (comments): 19-21
- Lines (code): 23-26
Map Properties
| Name | Type | Default | Description |
|---|---|---|---|
| icon-margin | Dimension | 1em | List of other sizes (large by default), each size is a map of (width, font-size) |
Mixins
set()
Mixin
Change modules $config
File Information
- File: _button.scss
- Group: button
- Type: mixin
- Lines (comments): 28-31
- Lines (code): 33-35
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): 47-51
- Lines (code): 53-119
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): 37-40
- Lines (code): 42-45
Examples
@include ulu.component-button-get("property");Parameters
| Name | Type | Description |
|---|---|---|
| $name | Map |
Name of property |