> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/3.actionsheet.md).

# Action Sheet

### Actions Props <a href="#actions-props" id="actions-props"></a>

| Name            | Type        | Default | Description                                                        |
| --------------- | ----------- | ------- | ------------------------------------------------------------------ |
| backdrop        | boolean     | true    | Enables Action Sheet backdrop (dark semi transparent layer behind) |
| component       | string      | 'div'   | Component's HTML Element                                           |
| opened          | boolean     | false   | Allows to open/close Action Sheet and set its initial state        |
| onBackdropClick | function(e) |         | Click handler on backdrop element                                  |

### ActionsButton Props <a href="#actionsbutton-props" id="actionsbutton-props"></a>

| Name                    | Type    | Default                                                 | Description                                                                               |
| ----------------------- | ------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| bold                    | boolean | undefined                                               | Makes button text bold. Overwrites `boldIos` and `boldMaterial`                           |
| boldIos                 | boolean | false                                                   | Makes button text bold in iOS theme                                                       |
| boldMaterial            | boolean | false                                                   | Makes button text bold in Material theme                                                  |
| colors                  | object  |                                                         | Object with Tailwind CSS colors classes                                                   |
| colors.activeBgIos      | string  | 'active:bg-neutral-200 dark:active:bg-neutral-700'      |                                                                                           |
| colors.activeBgMaterial | string  | ''                                                      |                                                                                           |
| colors.bgIos            | string  | 'bg-white dark:bg-neutral-800'                          |                                                                                           |
| colors.bgMaterial       | string  | 'bg-md-light-surface-3 dark:bg-md-dark-surface-3'       |                                                                                           |
| colors.textIos          | string  | 'text-primary'                                          |                                                                                           |
| colors.textMaterial     | string  | 'text-md-light-on-surface dark:text-md-dark-on-surface' |                                                                                           |
| component               | string  | 'button'                                                | Component's HTML Element                                                                  |
| dividers                | boolean | undefined                                               | Renders button outer hairlines (borders). If not specified, will be enabled for iOS theme |
| fontSizeIos             | string  | 'text-xl'                                               | Button text font size in iOS theme                                                        |
| fontSizeMaterial        | string  | 'text-base'                                             | Button text font size in Material theme                                                   |
| href                    | string  |                                                         | Link's `href` attribute, when specified will also be rendered as `<a>` element            |
| touchRipple             | boolean | true                                                    | Enables touch ripple effect in Material theme                                             |

### ActionsLabel Props <a href="#actionslabel-props" id="actionslabel-props"></a>

| Name                | Type    | Default                                                           | Description                                                                              |
| ------------------- | ------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| colors              | object  |                                                                   | Object with Tailwind CSS colors classes                                                  |
| colors.bgIos        | string  | 'bg-white dark:bg-neutral-800'                                    |                                                                                          |
| colors.bgMaterial   | string  | 'bg-md-light-surface-3 dark:bg-md-dark-surface-3'                 |                                                                                          |
| colors.textIos      | string  | 'text-black text-opacity-55 dark:text-white dark:text-opacity-55' |                                                                                          |
| colors.textMaterial | string  | 'text-md-light-primary dark:text-md-dark-primary'                 |                                                                                          |
| component           | string  | 'div'                                                             | Component's HTML Element                                                                 |
| dividers            | boolean | undefined                                                         | Renders button outer hairlines (borders). If not specified, will be enabled in iOS theme |
| fontSizeIos         | string  | 'text-sm'                                                         | Button text font size in iOS theme                                                       |
| fontSizeMaterial    | string  | 'text-sm'                                                         | Button text font size in Material theme                                                  |

### ActionsGroup Props <a href="#actionsgroup-props" id="actionsgroup-props"></a>

| Name      | Type    | Default | Description                                                       |
| --------- | ------- | ------- | ----------------------------------------------------------------- |
| component | string  | 'div'   | Component's HTML Element                                          |
| dividers  | boolean | true    | Renders group outer hairlines (borders). (in Material theme only) |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="ActionSheet" />

    <i-block strong inset class="space-y-4">
      <p>
        Action Sheet is a slide-up pane for presenting the user with a set of
        alternatives for how to proceed with a given task.
      </p>
    </i-block>
    <i-block-title>Open Action Sheet</i-block-title>
    <i-block strong inset class="flex space-x-4 rtl:space-x-reverse">
      <i-button @click="() => (actionsOneOpened = true)">One group</i-button>
      <i-button @click="() => (actionsTwoOpened = true)">Two groups</i-button>
    </i-block>

    <i-actions
      :opened="actionsOneOpened"
      @backdropclick="() => (actionsOneOpened = false)"
    >
      <i-actions-group>
        <i-actions-label>Do something</i-actions-label>
        <i-actions-button bold @click="() => (actionsOneOpened = false)">
          Button 1
        </i-actions-button>
        <i-actions-button @click="() => (actionsOneOpened = false)">
          Button 2
        </i-actions-button>
        <i-actions-button @click="() => (actionsOneOpened = false)">
          Cancel
        </i-actions-button>
      </i-actions-group>
    </i-actions>

    <i-actions
      :opened="actionsTwoOpened"
      @backdropclick="() => (actionsTwoOpened = false)"
    >
      <i-actions-group>
        <i-actions-label>Do something</i-actions-label>
        <i-actions-button bold @click="() => (actionsTwoOpened = false)">
          Button 1
        </i-actions-button>
        <i-actions-button @click="() => (actionsTwoOpened = false)">
          Button 2
        </i-actions-button>
      </i-actions-group>
      <i-actions-group>
        <i-actions-button @click="() => (actionsTwoOpened = false)">
          Cancel
        </i-actions-button>
      </i-actions-group>
    </i-actions>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBlockTitle,
    iBlock,
    iButton,
    iActions,
    iActionsButton,
    iActionsLabel,
    iActionsGroup,
  } from 'ina-ui/vue';
  import { ref } from 'vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBlockTitle,
      iBlock,
      iButton,
      iActions,
      iActionsButton,
      iActionsLabel,
      iActionsGroup,
    },
    setup() {
      const actionsOneOpened = ref(false);
      const actionsTwoOpened = ref(false);

      return {
        actionsOneOpened,
        actionsTwoOpened,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Button,
  Block,
  BlockTitle,
  Actions,
  ActionsGroup,
  ActionsLabel,
  ActionsButton,
} from 'konsta/react';

export default function ActionSheetPage() {
  const isPreview = document.location.href.includes('examplePreview');

  const [actionsOneOpened, setActionsOneOpened] = useState(false);
  const [actionsTwoOpened, setActionsTwoOpened] = useState(false);
  return (
    <Page>
      <Navbar
        title="Action Sheet"
        />
      <Block strong inset className="space-y-4">
        <p>
          Action Sheet is a slide-up pane for presenting the user with a set of
          alternatives for how to proceed with a given task.
        </p>
      </Block>
      <BlockTitle>Open Action Sheet</BlockTitle>
      <Block strong inset className="flex space-x-4 rtl:space-x-reverse">
        <Button onClick={() => setActionsOneOpened(true)}>One group</Button>
        <Button onClick={() => setActionsTwoOpened(true)}>Two groups</Button>
      </Block>

      <Actions
        opened={actionsOneOpened}
        onBackdropClick={() => setActionsOneOpened(false)}
      >
        <ActionsGroup>
          <ActionsLabel>Do something</ActionsLabel>
          <ActionsButton onClick={() => setActionsOneOpened(false)} bold>
            Button 1
          </ActionsButton>
          <ActionsButton onClick={() => setActionsOneOpened(false)}>
            Button 2
          </ActionsButton>
          <ActionsButton onClick={() => setActionsOneOpened(false)}>
            Cancel
          </ActionsButton>
        </ActionsGroup>
      </Actions>

      <Actions
        opened={actionsTwoOpened}
        onBackdropClick={() => setActionsTwoOpened(false)}
      >
        <ActionsGroup>
          <ActionsLabel>Do something</ActionsLabel>
          <ActionsButton onClick={() => setActionsTwoOpened(false)} bold>
            Button 1
          </ActionsButton>
          <ActionsButton onClick={() => setActionsTwoOpened(false)}>
            Button 2
          </ActionsButton>
        </ActionsGroup>
        <ActionsGroup>
          <ActionsButton onClick={() => setActionsTwoOpened(false)}>
            Cancel
          </ActionsButton>
        </ActionsGroup>
      </Actions>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/3.actionsheet.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.