Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Drawer

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Pannel or sidebar that slides from the edge of the screen. It is used for complete a task or view some contextual information while conserve screen space.

import { Drawer } from '@kubit-ui-web/react-components'
123456789
<Drawer
  variant="DEFAULT"
  title={{ content: 'Title', ['aria-label']: 'Aria label title' }}
  closeIcon={{ icon: 'ICON_PLACEHOLDER', altText: 'alt text icon', ['aria-label']: 'Aria label close icon' }}
  level="FIRST_LEVEL"
  blocked={true}
>
  Content
</Drawer>

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

12345678910
<Drawer
  variant='DEFAULT'
  title={{ content: 'Title', ['aria-label']: 'Aria label title' }}
  closeIcon={{ icon: 'ICON_PLACEHOLDER', altText: 'alt text icon', ['aria-label']: 'Aria label close icon' }}
  level="FIRST_LEVEL"
  defaultOpen={true}
  blocked={true}
>
  Content
</Drawer>

Some of the basic props when definying the drawer are:

Use footer property for definying the content that will appear in the down part. It can include text, images, other components... It is normally used for buttons and links. The content will be display when the component is open.

12345678910
<Drawer
  variant='DEFAULT'
  title={{ content: 'Title', ['aria-label']: 'Aria label title' }}
  closeIcon={{ icon: 'ICON_PLACEHOLDER', altText: 'alt text icon', ['aria-label']: 'Aria label close icon' }}
  level="FIRST_LEVEL"
  defaultOpen={true}
  blocked={true}
  footer={{
    content: [
      <div key={0} data-position="LEFT">
ContainerAccessibility
DrawerDesign Specs