UiKit

Buttons

Color variants

          
  <u-button color="red">Red</u-button>
  <u-button color="blue">Blue</u-button>
  <u-button color="blue-light">Blue light</u-button>
  <u-button color="black">Black</u-button>
  <u-button color="dark">Dark</u-button>
  <u-button color="dark-light">Dark light</u-button>
  <u-button color="gray">Gray</u-button>
  <u-button color="gray-light">Gray light</u-button>
          
        

Border variants

          
  <u-button color="red" :is-outline="true">Red</u-button>
  <u-button color="blue" :is-outline="true">Blue</u-button>
  <u-button color="blue-light" :is-outline="true">Blue light</u-button>
  <u-button color="black" :is-outline="true">Black</u-button>
  <u-button color="dark" :is-outline="true">Dark</u-button>
  <u-button color="dark-light" :is-outline="true">Dark light</u-button>
  <u-button color="gray" :is-outline="true">Gray</u-button>
  <u-button color="gray-light" :is-outline="true">Gray light</u-button>
          
        

Size variants

          
  <u-button color="red" size="sm">Small</u-button>
  <u-button color="red">Regular</u-button>
  <u-button color="red" size="xl">Extra large</u-button>
          
        

Icon handling

          
  <u-button color="blue">
    <svg-icon name="bags" class="mr-5" />
    Blue
  </u-button>
  <u-button color="red">
    Gray light
    <svg-icon name="bags" class="ml-5" />
  </u-button>
  <u-button color="red" size="xl">
    <svg-icon name="bags" />
  </u-button>
          
        

White variants

          
  <div class="bg-dark p-10">
    <u-button color="white">
      White
    </u-button>
    <u-button color="white" :is-outline="true">
      White outline
    </u-button>
  </div>
          
        

Events binding

          
  <!-- HTML -->
  <u-button color="red" @on-click="helloWorld('tout va bien')">
    Hello world
  </u-button>
          
        
          
  // Javascript
  helloWorld(str) {
    alert('Coucou monde ' + str)
  }
          
        

Promise

          
  <u-button color="red" size="xl" :promise="promiseMethod">
    Promise button
  </u-button>
          
        
          
  // Javascript
  promiseMethod() {
    const P = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('All done')
      }, 3000)
    })

    return P.then((val) => {
      alert(val)
    })
  }
          
        

Links

Color variants

Link   Link blue   Link red   Link gray   Link dark

Link white

          
  <nuxt-link :to="localePath('index')" class="link">Link</nuxt-link">
  <nuxt-link :to="localePath('index')" class="link link-blue">Link blue</nuxt-link>
  <nuxt-link :to="localePath('index')" class="link link-red">Link red</nuxt-link>
  <nuxt-link :to="localePath('index')" class="link link-gray">Link gray</nuxt-link>
  <nuxt-link :to="localePath('index')" class="link link-dark">Link dark</nuxt-link>
          
        

Colors

Primary

Grays

Font

Gibson light

Gibson book

Gibson regular

Gibson medium

Gibson semibold

Text

The first time I stole so that I wouldn't starve, yes. I lost many assumptions about the simple nature of right and wrong. And when I traveled I learned the fear before a crime and the thrill of success. But I never became one of them.

The first time I stole so that I wouldn't starve, yes. I lost many assumptions about the simple nature of right and wrong. And when I traveled I learned the fear before a crime and the thrill of success. But I never became one of them.

Bold Italic Underline Line-through

Forms

This is a required field

With a little description

Checkbox