Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Action bottom sheet

v.1.0.0 | Saturn

Usage

The name of the the tokens object to style action bottom sheet is ACTION_BOTTOM_SHEET_STYLES.

You can not change the name of the the tokens object.

ActionBottomSheet component style can be configured through the variant prop:

  • Variant: modify the styles of the ActionBottomSheet.

The structure of the ACTION_BOTTOM_SHEET_STYLES object is:

Variants

Variants can modify the styles for the ActionBottomSheet.

The tokens used are:

12345678910
const ACTION_BOTTOM_SHEET_STYLES = {
  [VARIANT]: {
  container?: CommonStyleType;
  header?: CommonStyleType;
  closeIconContainer?: CommonStyleType;
  closeIcon?: IconTypes;
  titleContainer?: CommonStyleType;
  titleContainerFont?: TypographyTypes;
  title?: TypographyTypes;
  headerContent?: CommonStyleType;

Example

12345678910
const ACTION_BOTTOM_SHEET_STYLES = {
  [VARIANT]: {
    container: {
      background_color: 'background-color',
      border_radius: 'border-radius',
      padding: 'padding',
      margin: 'margin',
    },
    header: {
      display: 'display'
Action bottom sheetCode API
Action bottom sheetAccessibility