# 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--full-width
  • .sf-button--outline
  • .sf-button--outline.color-primary
  • .sf-button--outline.color-secondary
  • .sf-button--outline.color-light
  • .sf-button--outline.color-dark
  • .sf-button--outline.color-info
  • .sf-button--outline.color-success
  • .sf-button--outline.color-warning
  • .sf-button--outline.color-danger
  • .sf-button--text
  • .sf-button--text.color-primary
  • .sf-button--text.color-secondary
  • .sf-button--text.color-light
  • .sf-button--text.color-dark
  • .sf-button--text.color-info
  • .sf-button--text.color-success
  • .sf-button--text.color-warning
  • .sf-button--text.color-danger

# SCSS variables

$button-padding: 1rem 2.5rem !default;
$button-padding-desktop: 0.9375rem 2.5rem !default;
$button-color: $c-on-dark !default;
$button-background-color: $c-primary !default;
$button-font-family: $body-font-family-secondary !default;
$button-font-size: $font-size-small-mobile !default;
$button-font-size-desktop: $font-size-small-desktop !default;
$button-font-weight: $body-font-weight-secondary !default;
$button-line-height: 1.6 !default;
$button--outline-border: 2px !default;

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/atoms/SfButton/SfButton.html"></template>
<script src="@storefront-ui/vue/src/components/atoms/SfButton/SfButton.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfButton.scss";
</style>

You can read about using component partials here

# Play with this component

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