Nuxt/docs/components/atoms/ButtonLink.vue

47 lines
1.1 KiB
Vue
Raw Normal View History

<template>
<Link class="button-link" :class="[size, bold ? 'font-semibold' : 'font-medium']" :to="href" :blank="blank">
<Markdown unwrap="p ul li" />
<template #href>
<IconExternalLink v-if="blank" class="w-4 h-4 ml-2" />
</template>
</Link>
</template>
<script>
import { defineComponent } from '@nuxtjs/composition-api'
export default defineComponent({
props: {
href: {
type: String,
default: ''
},
blank: {
type: Boolean,
default: false
},
size: {
type: String,
default: ''
},
bold: {
type: Boolean,
default: false
}
}
})
</script>
<style lang="postcss" scoped>
a.button-link {
@apply inline-flex items-center flex-none rounded-md mb-2 sm:mb-0 px-3 py-1.5 text-xs leading-4 text-black transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-400 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
&.medium {
@apply px-4 py-2.5 text-sm leading-4;
}
&.large {
@apply px-6 py-2.5 text-lg leading-6;
}
}
</style>