diff --git a/resources/js/components/SMButton.vue b/resources/js/components/SMButton.vue index d561a27..ea2f4b2 100644 --- a/resources/js/components/SMButton.vue +++ b/resources/js/components/SMButton.vue @@ -5,7 +5,7 @@ :class="[ 'button', classType, - { 'button-small': small }, + props.size, { 'button-block': block }, { 'dropdown-button': dropdown }, ]" @@ -36,12 +36,7 @@ v-else-if="!isEmpty(to) && typeof to == 'string'" :href="to" :disabled="disabled" - :class="[ - 'button', - classType, - { 'button-small': small }, - { 'button-block': block }, - ]" + :class="['button', classType, props.size, { 'button-block': block }]" :type="buttonType"> {{ label }} @@ -49,12 +44,7 @@ v-else-if="!isEmpty(to) && typeof to == 'object'" :to="to" :disabled="disabled" - :class="[ - 'button', - classType, - { 'button-small': small }, - { 'button-block': block }, - ]"> + :class="['button', classType, props.size, { 'button-block': block }]"> {{ label }} @@ -98,9 +88,9 @@ const props = defineProps({ default: false, required: false, }, - small: { - type: Boolean, - default: false, + size: { + type: String, + default: "", required: false, }, dropdown: { @@ -186,6 +176,16 @@ const handleClickItem = (item: string) => { cursor: not-allowed; } + &.medium { + padding: 12px 24px; + font-size: 80%; + } + + &.small { + padding: 8px 16px; + font-size: 75%; + } + &.light { background-color: #eee; color: #095589;