Usage

import { Kdb } from '@pillar-ui/core'

<Kdb />

Examples

Color

Default

b

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

EscEscEscEscEscEscEscEsc

import { Kbd } from '@pillar-ui/core'

export const KbdColor = () => {
  return (
    <>
      <Kbd title="Esc" />
      <Kbd title="Esc" color="d" />
      <Kbd title="Esc" color="su" />
      <Kbd title="Esc" color="w" />
      <Kbd title="Esc" color="p" />
      <Kbd title="Esc" color="b" />
      <Kbd title="Esc" color="se" />
      <Kbd title="Esc" color="i" />
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

EscEscEscEscEscEscEscEscEsc

import { Kbd } from '@pillar-ui/core'

export const KbdSize = () => {
  return (
    <>
      <Kbd title="Esc" size="1" />
      <Kbd title="Esc" size="2" />
      <Kbd title="Esc" size="3" />
      <Kbd title="Esc" size="4" />
      <Kbd title="Esc" size="5" />
      <Kbd title="Esc" size="6" />
      <Kbd title="Esc" size="7" />
      <Kbd title="Esc" size="8" />
      <Kbd title="Esc" size="9" />
    </>
  )
}

Corner

Default

2

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'

EscEscEscEscEscEscEscEsc

import { Kbd } from '@pillar-ui/core'

export const KbdCorner = () => {
  return (
    <>
      <Kbd title="Esc" corner="0" />
      <Kbd title="Esc" corner="1" />
      <Kbd title="Esc" corner="2" />
      <Kbd title="Esc" corner="3" />
      <Kbd title="Esc" corner="4" />
      <Kbd title="Esc" corner="5" />
      <Kbd title="Esc" corner="full" />
      <Kbd title="Esc" corner="circle" />
    </>
  )
}

Variant

Default

soft

Type

'shadow' | 'solid' | 'outline' | 'soft' | 'mixed'

EscEscEscEscEsc

import { Kbd } from '@pillar-ui/core'

export const KbdVariant = () => {
  return (
    <>
      <>
        <Kbd title="Esc" variant="shadow" />
        <Kbd title="Esc" variant="solid" />
        <Kbd title="Esc" variant="mixed" />
        <Kbd title="Esc" variant="soft" />
        <Kbd title="Esc" variant="outline" />
      </>
    </>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default corner of the Button */
--kdb-rad:;
/* Change the default size of the Button */
--kdb-size:;
/* Change the default size of the Button */
--kdb-transform:;