components
Action bottom sheet
v.1.0.0 | SaturnImport
12345678910
import { ActionBottomSheet } from '@kubit-ui-web/react-components'; <ActionBottomSheet variant="DEFAULT_NO_ANIMATION" title={{ content: 'Title' }} closeIcon={{ icon: 'ICON_X', altText: 'Close icon alt text', ['aria-label']: 'Aria label button', }} open={true}
Props
Let's delve into the versatility of the ActionBottomSheet component by examining its available props:
Note that the ActionBottomSheet component's default styling properties can be moderately adjusted through the ctv an cts props, in case the project do not need a full variant customization. This limited customization ensures a seamless balance between predefined aesthetic and your specific design requirements. Additionally, it's essential to highlight that Kubit always provided the option to full customized all the variants that your project needs.
Uncontrolled
| Property | Description | Type | Default |
|---|---|---|---|
variant Required | Current variant of ActionBottomSheet | String | - |
open Required | Indicates if ActionBottomSheet is open or not | Boolean | false |
children Required | Content to place inside ActionBottomSheet | ReactNode | - |
| popover | Object to configure the popover in case it is necessary | ActionBottomPopoverType | - |
| blocked | If it is true, the component won't be closed by clicking outside | Boolean | false |
| closeIcon | Add close icon | IElementOrIcon | - |
| title | Title od the ActionBottomSheet | ActionBottomSheetTextType | - |
| hasHeader | It indicates if header is showed | Boolean | true |
| headerContent | Content to place at header | ReactNode | - |
| height | Height applied to paren container | String | - |
| dataTestId | Test id of the actionBottomSheet. Internal components will concatenate from this test id. | String | - |
| ctv | Modify styles for the default version of the component | ActionBottomSheetVariantStylesType | - |
Controlled
| Property | Description | Type | Default |
|---|---|---|---|
variant Required | Current variant of ActionBottomSheet | String | - |
open Required | Indicates if ActionBottomSheet is open or not | Boolean | false |
children Required | Content to place inside ActionBottomSheet | ReactNode | - |
| popover | Object to configure the popover in case it is necessary | ActionBottomPopoverType | - |
| blocked | If it is true, the component won't be closed by clicking outside | Boolean | false |
| closeIcon | Add close icon | IElementOrIcon | - |
| title | Title od the ActionBottomSheet | ActionBottomSheetTextType | - |
| hasHeader | It indicates if header is showed | Boolean | true |
| headerContent | Content to place at header | ReactNode | - |
| height | Height applied to paren container | String | - |
| dataTestId | Test id of the actionBottomSheet. Internal components will concatenate from this test id. | String | - |
| ctv | Modify styles for the default version of the component | ActionBottomSheetVariantStylesType | - |