<template>
    <button
        class="px-2 py-1 font-roboto text-sm hover:shadow disabled:cursor-not-allowed"
        :class="{ 'text-orange ring-1 ring-orange ring-inset hover:bg-orange hover:text-white': hover, 'text-white bg-orange disabled:bg-lightorange': !hover }"
        @click="pressed"
        :disabled="disabled">
        {{ text }}
    </button>
</template>

<script>
export default {
    name: "SmallButton",
    props: {
        text: {
            type: String,
            default: ''
        },
        pressed: {
            type: Function,
            default: () => {}
        },
        hover: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        }
    }
}
</script>