React ActionSheet

  • Add a slide-up menu with important actions optimized for mobile screens.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
  • Add a Menu that Slides Up From the Bottom of the Screen.

    The React ActionSheet, sometimes called BottomSheet, is a UX device used for smaller screens when you need to alert or prompt users to action. It appears on the bottom of a screen as a modal dialog and presents users with a choice of actions that they must take. Since this element is popular in iOS and Android, it gives you an easy way to add a popular workflow to mobile or responsive applications.

    See the React ActionSheet demo

    actionsheet overview
  • Items

    The React ActionSheet provides options to help customize the layout and look of the items within it. These include:

    • Defining groups
    • Setting icons
    • Styling items

    See the React ActionSheet Items demo

    Actionsheet items
  • Custom Rendering

    The React ActionSheet supports templates to help you make the menu fit your app's appearance requirements. Set the title template or the item template to uniformly configure the component with styles, colors, icons, images, and more.

    See the React ActionSheet Custom Rendering demo

  • Accessibility

    The KendoReact component is WCAG 2.1 AAA and Section 508 compliant. The component also follows the WAI-ARIA best practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers.

    See the KendoReact ActionSheet Accessibility demo

  • Animations

    By leveraging the input properties of the KendoReact ActionSheet, you can effortlessly configure the opening and closing animations, as well as the visibility of the ActionSheet component. The animations are included by default, and you have the option to disable them or control their duration.

    See the KendoReact ActionSheet Animations demo

    ActionSheet Animation
  • Keyboard Navigation

    The KendoReact ActionSheet component supports keyboard navigation, enabling end users to use the keyboard to walk through the component and invoke actions such as buttons click, grid paging and more.

    See the KendoReact ActionSheet Keyboard Navigation demo

    KendoReact ActionSheet Keyboard Navigation

All KendoReact Components

Next Steps