# Button

Base button component.

# Most common usage scenario

<template>
  <SfButton :class="customClass" :disabled="disabled">
    {{ customLabel }}
  </SfButton>
</template>
<script>
import { SfButton } from "@storefront-ui/vue";
export default {
  components: {
    SfButton,
  },
  data() {
    return {
      default: "Shop now",
      disabled: false,
    };
  },
};
</script>

# Props

  • disabled
    • Native button disabled attribute
    • type: boolean
    • defaultValue: false

# Slots

  • default
    • Use this slot to place content inside the button.

# Events

None.

# CSS modifiers

  • .sf-button--pure
  • .sf-button--full-width
  • .sf-button--outline
  • .sf-button--text
  • .sf-button--underlined

# CSS custom properties (variables)

  • --button-size
  • --button-display
  • --button-padding
  • --button-color
  • --button-background
  • --button-box-shadow
  • --button-text-transform
  • --button-text-decoration
  • --button-transition
  • --button-cursor
  • --button-border-radius
  • --button-wrap
  • --button-font
  • --button-font-weight
  • --button-font-size
  • --button-font-line-height
  • --button-font-family
  • --button-border
  • --button-border-width

# Overridden other components CSS variables

  • --button-width
  • --button-border-color

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.