# MainButtonMobile

### Usage

```js
import MainButtonMobile , from "@docspace/shared/components/main-button-mobile";
import MobileActionsFolderReactSvgUrl from "PUBLIC_DIR/images/mobile.actions.folder.react.svg?url";
```

```jsx
const actionOptions = [
  {
    key: "1",
    label: "New document",
    icon: MobileActionsFolderReactSvgUrl,
  },
  {
    key: "2",
    label: "New presentation",
    icon: MobileActionsFolderReactSvgUrl,
  },
];

const buttonOptions = [
  {
    key: "1",
    label: "Import point",
  },
  {
    key: "2",
    label: "Import point",
  },
];

const progressOptions = [
  {
    key: "1",
    label: "Uploads",
    percent: 30,
    status: `8/10`,
    open: true,
  },
];

<MainButtonMobile
  style={{
    top: "90%",
    left: "82%",
    position: "fixed",
  }}
  manualWidth="320px"
  title="Upload"
  withButton={true}
  actionOptions={actionOptions}
  progressOptions={progressOptions}
  isOpenButton={true}
  buttonOptions={buttonOptions}
/>;
```

| Props             |      Type      | Required | Values | Default | Description                                                                                        |
| ----------------- | :------------: | :------: | :----: | :-----: | -------------------------------------------------------------------------------------------------- |
| `style`           | `obj`, `array` |    -     |   -    |    -    | Accepts css style                                                                                  |
| `actionOptions`   |     `obj`      |    -     |   -    |    -    | Options for drop down items                                                                        |
| `progressOptions` |     `obj`      |    -     |   -    |    -    | If you need display progress bar components                                                        |
| `buttonOptions`   |     `obj`      |    -     |   -    |    -    | Menu that opens by clicking on the button                                                          |
| `onUploadClick`   |     `func`     |    -     |   -    |    -    | The function that will be called after the button click                                            |
| `withButton`      |     `bool`     |    -     |   -    |    -    | Show button inside drop down                                                                       |
| `isOpenButton`    |     `bool`     |    -     |   -    |    -    | The parameter that is used with buttonOptions is needed to open the menu by clicking on the button |
| `title`           |    `string`    |    -     |        |    -    | The name of the button in the drop down                                                            |
| `percent`         |    `number`    |    -     |   -    |    -    | Loading indicator                                                                                  |
| `manualWidth`     |    `string`    |    -     |   -    |    -    | Required if you need to specify the exact width of the drop down component                         |
| `opened`          |     `bool`     |    -     |   -    |    -    | Tells when the dropdown should be opened                                                           |
| `className`       |    `string`    |    -     |   -    |    -    | Accepts class                                                                                      |
| `onClose`         |     `func`     |    -     |   -    |    -    | if you need close drop down                                                                        |