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;