Oruga

# Button

The classic button, in different colors, sizes, and states

edit on github

# Examples

# Base

<template>
  <section>
    <o-button @click="clickMe">Click Me</o-button>
  </section>
</template>

<script>
  export default {
    methods: {
      clickMe() {
        alert('Clicked!')
      }
    }
  }
</script>

# States and Styles

<template>
  <section>
    <div class="buttons">
      <o-button variant="primary">Primary</o-button>
      <o-button variant="success">Success</o-button>
      <o-button variant="danger">Danger</o-button>
      <o-button variant="warning">Warning</o-button>
      <o-button variant="info">Info</o-button>
    </div>

    <div class="buttons">
      <o-button>Normal</o-button>
      <o-button disabled>Disabled</o-button>
      <o-button rounded>Rounded</o-button>
    </div>

    <div class="buttons">
      <o-button variant="primary" outlined>Outlined</o-button>
      <o-button variant="primary" inverted>Inverted</o-button>
    </div>
  </section>
</template>

<script>
  export default {}
</script>

# Icons


<template>
  <section>
    <div class="buttons">
      <o-button size="small" icon-left="plus">
        Add
      </o-button>

      <o-button icon-left="plus">
        Add
      </o-button>

      <o-button size="medium" icon-left="plus">
        Add
      </o-button>

      <o-button size="large" icon-left="plus">
        Add
      </o-button>
    </div>

    <br />

    <div class="buttons">
      <o-button variant="danger" icon-left="trash">
        Delete
      </o-button>

      <o-button variant="danger" icon-right="trash">
        Delete
      </o-button>

      <o-button variant="danger" icon-right="trash" />
    </div>
  </section>
</template>

<script>
  export default {}
</script>

# Tags

Anchor 
<template>
  <section>
    <div class="buttons">
      <o-button>Button</o-button>

      <o-button tag="a" href="https://oruga.io" target="_blank">
        Anchor
      </o-button>

      <o-button tag="input" native-type="submit" value="Submit input" />

      <!-- Need vue-router -->
      <!-- 
            <o-button tag="router-link"
                to="/home"
                variant="info">
                Docs
            </o-button>
            -->
    </div>
  </section>
</template>

<script>
  export default {}
</script>

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
disabledClass Class of the button when disabled. disabled
elementsWrapperClass Class of the button elements wrapper.
expandedClass Class of the button when expanded. expanded
iconClass Class of the button icon. iconLeft
iconRight
iconLeftClass Class of the button icon on the left. iconLeft
iconRightClass Class of the button icon on the right. iconRight
invertedClass Class of the button when inverted. inverted primary
info
warning
danger
labelClass Class of the button label.
loadingClass Class of the button loading. loading
outlinedClass Class of the button outlined. outlined primary
info
warning
danger
rootClass Class of the root element.
roundedClass Class of the button when rounded. rounded
sizeClass Class of the button size. size small
medium
large
variantClass Class of the button variant. variant primary
info
warning
danger


# Props

Prop name Description Type Values Default
disabled Button will be disabled boolean -
expanded Button will be expanded (full-width) boolean -
iconLeft Icon name to show on the left string -
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
iconRight Icon name to show on the right string -
inverted boolean -
label Button label, optional when default slot string -
loading Loading style boolean -
nativeType Button type, like native string - 'button'
outlined Outlined style boolean -
override Override classes boolean - false
rounded Rounded style boolean -
From config

button: {
  rounded: false
}
size Size of button, optional string small, medium, large
tag Button tag name string button, a, input, router-link, nuxt-link (or other nuxt alias) 'button'
variant Color of the control, optional string primary, info, success, warning, danger, and any other custom color

# Slots

Name Description Bindings
default

# Style

CSS Variable SASS Variable Default
--oruga-button-background-color $button-background-color $primary
--oruga-button-color $button-color $primary-invert
--oruga-button-border-radius $button-border-radius $base-border-radius
--oruga-button-border $button-border 1px solid $button-background-color
--oruga-button-box-shadow $button-box-shadow none
--oruga-button-font-weight $button-font-weight 400
--oruga-button-line-height $button-line-height $base-line-height
--oruga-button-margin-icon-to-text $button-margin-icon-to-text .1875em
--oruga-button-margin $button-margin 0
--oruga-button-height $button-height $control-height
--oruga-button-padding $button-padding $control-padding-vertical .75em
--oruga-button-rounded-border-radius $button-rounded-border-radius $base-rounded-border-radius
--oruga-button-disabled-opacity $button-disabled-opacity $base-disabled-opacity
--oruga-button-outlined-background-color $button-outlined-background-color transparent

← Carousel →