Jump To:

  1. Demos
    1. Standard Button Group
    2. Joined Button Group
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

Groups a set of buttons

Demos

Standard Button Group

A group of buttons with a standard gap between them.

HTML 
<div class="button-group">
  <button class="button">Action 1</button>
  <button class="button">Action 2</button>
  <button class="button">Action 3</button>
</div>

Joined Button Group

Buttons in this group are visually connected, with rounded corners only on the outer edges.

HTML 
<div class="button-group button-group--joined">
  <button class="button">Left</button>
  <button class="button is-active">Middle</button>
  <button class="button">Right</button>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "gap": 0.45em,
  "gap-joined" : 0,
  "no-min-width" : true
);
File Information
  • File: _button-group.scss
  • Group: button-group
  • Type: variable
  • Lines (comments): 14-18
  • Lines (code): 20-24

Map Properties

Name Type Default Description
gap Dimension 0.45em Gap between buttons
gap-joined Dimension 0 When using --joined modifier optional gap, if 0 the buttons borders will overlap, joined-gap is useful if your buttons don't have borders
no-min-width Boolean true Buttons within the button group should have no min width

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _button-group.scss
  • Group: button-group
  • Type: mixin
  • Lines (comments): 26-29
  • Lines (code): 31-33

Examples

@include ulu.component-button-group-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _button-group.scss
  • Group: button-group
  • Type: mixin
  • Lines (comments): 44-47
  • Lines (code): 49-95

Demo

View

Examples

@include ulu.component-button-group-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _button-group.scss
  • Group: button-group
  • Type: function
  • Lines (comments): 35-38
  • Lines (code): 40-42

Examples

@include ulu.component-button-group-get("property");

Parameters

Name Type Description
$name Map Name of property

Require