diff --git a/docs/content/3.components/kbd.md b/docs/content/3.components/kbd.md index be38e8db6a..18cc3a3934 100644 --- a/docs/content/3.components/kbd.md +++ b/docs/content/3.components/kbd.md @@ -62,6 +62,19 @@ items: --- :: +### Color :badge{label="Soon" class="align-text-top"} + +Use the `color` prop to change the color of the Kbd. + +::component-code +--- +props: + color: neutral +slots: + default: K +--- +:: + ### Variant Use the `variant` prop to change the variant of the Kbd. @@ -69,6 +82,7 @@ Use the `variant` prop to change the variant of the Kbd. ::component-code --- props: + color: neutral variant: solid slots: default: K diff --git a/playground/app/pages/components/kbd.vue b/playground/app/pages/components/kbd.vue index 500abda916..5fec5142b9 100644 --- a/playground/app/pages/components/kbd.vue +++ b/playground/app/pages/components/kbd.vue @@ -3,20 +3,16 @@ import theme from '#build/ui/kbd' import { kbdKeysMap } from '@nuxt/ui/composables/useKbd.js' const sizes = Object.keys(theme.variants.size) as Array +const variants = Object.keys(theme.variants.variant) as Array +const colors = Object.keys(theme.variants.color) as Array const kbdKeys = Object.keys(kbdKeysMap)