Go Main page
Go Main page

Web components

cover

components

Action bottom sheet

v.1.0.0 | Saturn

Floating panel that displays additional action-related content. It appears near the component that triggers its activation.

import { ActionBottomSheet } from '@kubit-ui-web/react-components'
12345678910
<ActionBottomSheet
  variant="DEFAULT"
  title={{ content: 'Title' }}
  closeIcon={{
    icon: 'ICON_X',
    altText: 'Close icon alt text',
    ['aria-label']: 'Aria label button',
  }}
  open={true}
  blocked={true}

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
<ActionBottomSheet
  variant="DEFAULT"
  title={{ content: 'Title' }}
  closeIcon={{
    icon: 'ICON_X',
    altText: 'Close icon alt text',
    ['aria-label']: 'Aria label button',
  }}
  open={true}
  blocked={true}