Buttons

Stylize your button by adding the classes lui button to it. There are 5 variations :

• Default-
• Flatflat
• Wiredwired
• Fillingfilling
• Inverted
  inverted

<button class="lui button">Default</button>
<button class="lui button flat">Flat</button>
<button class="lui button wired primary">Wired</button>
<button class="lui button filling primary">Filling</button>
<button class="lui button inverted">Inverted</button>

Add color to your button by adding a color class to it. There are 8 variations :

• Primaryprimary
• Secondarysecondary
• Yellow (Lucca's color)yellow
• Greygrey
• Lightlight
• Redred
• Orangeorange
• Greengreen

<button class="lui button primary">Primary</button>
<button class="lui button secondary">Secondary</button>
<button class="lui button yellow">Yellow (Lucca's color)</button>
<button class="lui button grey">Grey</button>
<button class="lui button light">Light</button>
<button class="lui button red">Red</button>
<button class="lui button orange">Orange</button>
<button class="lui button green">Green</button>

Your button can take 4 different sizes :

• Smallsmall
• Default-
• Largelarge
• X-largex-large

<button class="lui button small">Small</button>
<button class="lui button">Default</button>
<button class="lui button large">Large</button>
<button class="lui button x-large">X-large</button>

You can easily show the status of the action triggered by the button by adding status statusName to your button's classes. There are 3 statusName :

• Sendloading
• Sendok
• Sendfailure

Examples

<button class="lui button large status loading">Send</button>
<button class="lui button large with addon status loading"><i class="lui addon icon send"></i>Send</button>
<button class="lui button large status ok">Send</button>
<button class="lui button large with addon status ok"><i class="lui addon icon send"></i>Send</button>
<button class="lui button large status failure">Send</button>
<button class="lui button large with addon status failure"><i class="lui addon icon send"></i>Send</button>

Buttons can be groupped into button groups by embedding them into a <nav class="lui buttons"></nav>.

<nav class="lui buttons">
  <button class="lui button">01</button>
  <button class="lui button">02</button>
  <button class="lui button">03</button>
  <button class="lui button">04</button>
</nav>

Other examples

<nav class="lui buttons dark">
  <button class="lui button wired primary inverted">01</button>
  <button class="lui button wired primary inverted">02</button>
  <button class="lui button wired primary inverted">03</button>
  <button class="lui button wired primary inverted">04</button>
</nav>

<nav class="lui vertical buttons">
  <a class="lui button filling primary">These are</a>
  <a class="lui button filling primary">vertical</a>
  <a class="lui button filling primary">buttons</a>
</nav>