SkButton

This component depends on third-party component library for Vue 3:

• Component (button) from PrimeVue
• CSS from PrimeIcons and PrimeFlex

Example Usage

Example

<script setup>
function handleClick() {
  console.log('clicked');
}
</script>

<template>
  <SkButton type="primary" label="Primary" @click="handleClick()" />
  <SkButton type="primary" icon="archive" label="Button mit Icon" />
  <br />

  <SkButton type="primary" :small="true" label="Primary" @click="handleClick()" />
  <SkButton type="primary" :small="true" icon="archive" label="Button mit Icon" />
  <br />
  <SkButton type="secondary" label="secondary" />
  <SkButton type="secondary" placement="right" icon="archive" label="Button mit Icon" />
  <br />
  <SkButton type="secondary" :loading="true" label="Loading Button" />
  <SkButton type="tertiary" :loading="true" label="Tertiary Button" />
  <SkButton type="tertiary" placement="right" icon="arrow-ios-downward" label="Mehr anzeigen" />
</template>

<style lang="scss" scoped>
.demo-container .sk-button {
  @apply mr-s mb-s;
}
</style>

Reference

This component can be extended with all options from PrimeVue

Properties

Name	Type	Default	Description
type	String	yellow	changes the button styletype. options are: yellow, orange
icon	String	undefined	Setting the icon of the button
placement	String	"left"	Only applicable if icon exists. Can be "right" to place the icon on the right side
loading	Boolean	false	Set this to true in ordner to animate and show a loading state of the button

Events

Name	Parameters	Description
click	$event	do something