Button

Modular component and 100% customizable
oo-button

• Button Colors
• Button Variants
• Button Sizes

The base style of the button is set through the props & states properties giving you complete control on the appearance to make it the way you like.

//default config
button: (
  props: (
    padding: .438em 1.2em,
    font-size: rem(14),
    font-weight: bold,
    line-height: 1.45,
    color: #333,
    background-color: #fff,
    border: 1px solid #cecece,
    border-radius: .2em,
  ),
  states: (
    hover: (
      color: this('button.props.color'),
      background-color: ooDarken(this('button.props.backgroundColor'), 10%),
    ),
    focus: this('button.states.hover'),
    active: (
      background-color: ooDarken(this('button.props.backgroundColor'), 12%),
      box-shadow: inset 1px 1px 1px 0 ooDarken(this('button.props.backgroundColor'), 25%),
      outline: none,
    ),
  ),
),

<!-- basic button -->
<button oo-button>Button</button>

Loop config includes button by default. In manual mode add the mixin Button()

# Colors

Loop is giving you two colors by default, it's up to you to add more or less.oo-button="colorName"

//default config
palette: (
  'primary': #0ea7d6,
  'secondary': #959595,
),
button: (
  props: (/* ... */),
  states: (/* ... */),
  colors: this('palette'),
  outline: false,
),

<button oo-button>Base</button>
<a oo-button="primary" href="#">Primary</a>
<input oo-button="secondary" type="button" value="Secondary">

While settings custom colors, Loop will automatically determine the constrate of the text from the background color.

$ooLoop: ooAdd('button.colors', (
  'success': #8cc63f,
  'nectarine': #ffbe76,
  'yellow': #fffa65,
  'salmon': #ffb8b8,
  'purple': #8e44ad,
  'green-sea': #16a085,
));

Outline

An outline version of each color available. oo-button="colorName outline"

$ooLoop: ooSet('button.outline', true);

<button oo-button="primary outline">Success</button>
<button oo-button="success outline">Success</button>
<button oo-button="nectarine outline">Nectarine</button>
<button oo-button="yellow outline">Yellow</button>
<button oo-button="salmon outline">Salmon</button>
<button oo-button="purple outline">Purple</button>
<button oo-button="green-sea outline">Green sea</button>

# Variants

Change the size, the shape, the appearance of the button via the variants property by passing a list of css rules attached to a name. oo-button="variantName".

//default config
button: (
  variants: (
    'full': ( // full available as default
      width: 100%,
    ),
  )
),

$ooLoop: ooAdd('button.variants', (
  'baggy': (
    padding: 1.2em 2em,
    text-transform: uppercase,
  ),
  'large': (
    font-size: 1.5rem,
  ),
  'tag': (
    padding: 0.1em 0.5em,
    font-weight: 500,
    border-radius: 50em,
  ),
));

<button oo-button="primary full">Primary full</button>
<button oo-button="primary large">Primary large</button>
<button oo-button="secondary tag">Secondary tag</button>
<button oo-button="secondary baggy outline">Secondary baggy outline</button>

# Sizes

While the size of the button can be modified from variants. It is also possible to use text-utilites to quickly achieve some adjustments.

<button oo-button="primary" class="font-tiny">Tiny</button>
<button oo-button="primary">Default</button>
<button oo-button="primary" class="font-medium">Medium</button>
<button oo-button="primary" class="font-large">Large</button>
<button oo-button="primary large">Variant large</button>

Use Template << >> Use Form