feat(Button): add ghost button

- `--xc-button-border-radius: 0.25em`
jsonleex · Sep 8, 2023 · 2981091 · 2981091
1 parent ca3e0ed
commit 2981091
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 1 deletion.
diff --git a/components/button/button.css b/components/button/button.css
@@ -7,7 +7,7 @@
   --xc-button-background-color-hover: var(--xc-c-background-hover);
   --xc-button-background-color-active: var(--xc-c-background-active);
   --xc-button-background-color-disabled: var(--xc-c-background-disabled);
-  --xc-button-border-radius: 0;
+  --xc-button-border-radius: .25em;
 
   position: relative;
   display: inline-flex;
@@ -189,4 +189,10 @@
 
 .x-button>.iconify:only-child {
   margin: 0 -0.25em;
+}
+
+.x-button-ghost {
+  color: var(--xc-c-text-inverse);
+  background-color: transparent;
+  border-color: transparent;
 }
diff --git a/components/button/button.vue b/components/button/button.vue
@@ -6,6 +6,7 @@ export interface ButtonProps {
   loading?: boolean
   rounded?: boolean
   outlined?: boolean
+  ghost?: boolean
   color?: ButtonColor
 }
 
@@ -24,6 +25,7 @@ withDefaults(defineProps<ButtonProps>(), {
       loading && 'x-button-loading',
       outlined && 'x-button-outlined',
       rounded && 'x-button-rounded',
+      ghost && 'x-button-ghost',
     ]"
   >
     <slot />

diff --git a/components/button/demos/0.basic-useage.vue b/components/button/demos/0.basic-useage.vue
@@ -19,5 +19,8 @@ import { Button, Flex } from '@leex/components'
     <Button rounded>
       <span>rounded</span>
     </Button>
+    <Button ghost>
+      <span>ghost</span>
+    </Button>
   </Flex>
 </template>
diff --git a/components/button/demos/1.colored.vue b/components/button/demos/1.colored.vue
@@ -26,4 +26,12 @@ const colors: ButtonColor[] = ['primary', 'secondary', 'success', 'danger', 'war
       <span>{{ color }}</span>
     </Button>
   </Flex>
+  <Flex>
+    <Button
+      v-for="color in colors" :key="color" :color="color"
+      ghost
+    >
+      <span>{{ color }}</span>
+    </Button>
+  </Flex>
 </template>
diff --git a/components/button/demos/2.outlined.vue b/components/button/demos/2.outlined.vue
@@ -31,4 +31,13 @@ const colors: ButtonColor[] = ['primary', 'secondary', 'success', 'danger', 'war
       <span>{{ color }}</span>
     </Button>
   </Flex>
+  <Flex>
+    <Button
+      v-for="color in colors" :key="color" :color="color"
+      ghost
+      outlined
+    >
+      <span>{{ color }}</span>
+    </Button>
+  </Flex>
 </template>
diff --git a/components/button/demos/4.with-icons.vue b/components/button/demos/4.with-icons.vue
@@ -27,5 +27,8 @@ import { Button, Flex, Icon } from '@leex/components'
     <Button rounded>
       <Icon icon="ri:search-line" />
     </Button>
+    <Button rounded ghost>
+      <Icon icon="ri:search-line" />
+    </Button>
   </Flex>
 </template>