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.

Components & Variants

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Container
Required
Background color may vary according to design needs.
width
Fluid (content)-
height
- Fluid (100% bounded by parent element) - _shadow_ token _shadow_10_.

2

Content
Required
There must be a content to use this component. Always with a inner padding of 24px.

3

Title
Indicates information about the Action Bottom Sheet. The title can grow depending on the copy or the size of the typography.

4

Content
Describes the action that the user is going to do.

Behaviour

Desktop

  • Activate the Action Bottom Sheet

When the user clicks on an element that activates it (like a Button), the Action Bottom Sheet appears.

Foo

icon

Foo

  • Close the Action Bottom Sheet

The user can close the Action Bottom Sheet by selecting any item from the list, clicking the surfaces behind the dialog or the Close Button.

Foo

Foo

Foo

Mobile

  • Activate the Action Bottom Sheet

When the user clicks on an element that activates it (like a Button), the Action Bottom Sheet appears.

Foo

  • Close the Action Bottom Sheet

The user can close the Action Bottom Sheet by selecting any item from the list, clicking the surfaces behind the dialog or the Close Button.

Foo

Layout

  • Activate the Action Bottom Sheet

When the user clicks on an element that activates it (like a Button), the Action Bottem Sheet appears. The margin space between de trigger element and the Action Button Sheet must be 8 px.

Foo

Foo