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

<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 props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

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.
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	-
iconBoth		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	-
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