<template> <button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')"> <slot></slot> </button> </template> <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ props: { type: { type: String, required: false }, primary: { type: Boolean, required: false, default: false }, inline: { type: Boolean, required: false, default: false } }, data() { return { styl: 'fill' }; }, inject: { isCardChild: { default: false } }, created() { if (this.isCardChild) { this.styl = 'line'; } } }); </script> <style lang="stylus" scoped> .dmtdnykelhudezerjlfpbhgovrgnqqgr display block width 100% margin 0 padding 0 font-weight normal font-size 16px border none border-radius 6px outline none box-shadow none &.inline display inline-block width auto &.primary font-weight bold &.fill color var(--text) background var(--buttonBg) &:hover background var(--buttonHoverBg) &:active background var(--buttonActiveBg) &.primary color var(--primaryForeground) background var(--primary) &:hover background var(--primaryLighten5) &:active background var(--primaryDarken5) &:not(.fill) color var(--primary) background none &:hover color var(--primaryDarken5) &:active background var(--primaryAlpha03) </style>