react-native-ui-lib/src/components/floatingButton/floatingButton.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "FloatingButton",
  "category": "overlays",
  "description": "Hovering button with gradient background",
  "modifiers": [
    "margin",
    "background",
    "color"
  ],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx",
  "images": [
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true"
  ],
  "props": [
    {
      "name": "visible",
      "type": "boolean",
      "description": "Whether the component is visible"
    },
    {
      "name": "button",
      "type": "ButtonProps",
      "description": "Props for the Button component"
    },
    {
      "name": "secondaryButton",
      "type": "ButtonProps",
      "description": "Props for the secondary Button component"
    },
    {
      "name": "bottomMargin",
      "type": "number",
      "description": "The bottom margin of the button, or secondary button if passed"
    },
    {
      "name": "fullWidth",
      "type": "boolean",
      "description": "Whether the buttons get the container's full with",
      "note": "Relevant to vertical layout only"
    },
    {
      "name": "buttonLayout",
      "type": "FloatingButtonLayouts",
      "description": "Button layout direction: vertical or horizontal"
    },
    {
      "name": "duration",
      "type": "number",
      "description": "The duration of the button's animations (show/hide)"
    },
    {
      "name": "withoutAnimation",
      "type": "boolean",
      "description": "Whether to show/hide the button without animation"
    },
    {
      "name": "hideBackgroundOverlay",
      "type": "boolean",
      "description": "Whether to show background overlay"
    },
    {
      "name": "testID",
      "type": "string",
      "description": "The test id for e2e tests",
      "note": "Use `testID.button` for the main button or `testID.secondaryButton` for the secondary"
    }
  ],
  "snippet": [
    "<FloatingButton visible={isVisible$1} button={{label: 'Approve', onPress: () => console.log('approved')}}$2}/>"
  ],
  "docs": {
    "hero": {
      "title": "FloatingButton",
      "description": "The Floating Button stays at the bottom of the screen, above other content, with an overlay to improve visibility.\nIt can appear with an animation, such as after a user interacts with a field, and is useful for highlighting key actions like continuing a process or submitting a form.",
      "type": "hero",
      "layout": "horizontal",
      "content": [
        {
          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/FloatingButton/floatingButton_overview_preview.png"
        }
      ]
    },
    "tabs": [
      {
        "title": "Overview",
        "sections": [
          {
            "type": "section",
            "title": "Usage Examples",
            "description": "The floating button can appear when the screen opens or after the user interacts with the screen or specific elements on it.",
            "content": [
              {
                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=607-43542&embed-host=share"
              }
            ]
          },
          {
            "type": "table",
            "columns": [
              "Property",
              "Default",
              "Full Width"
            ],
            "items": [
              {
                "title": "Main button",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/FloatingButton/floatingButton_overview_options_mainDefault.png"
                  },
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/FloatingButton/floatingButton_overview_options_mainFullWidth.png"
                  }
                ]
              },
              {
                "title": "Main+secondary button",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/FloatingButton/floatingButton_overview_options_mainSecondaryDefault.png"
                  },
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/FloatingButton/floatingButton_overview_options_mainSecondaryFullWidth.png"
                  }
                ]
              }
            ],
            "title": "Button Options",
            "description": "markdown:
The FloatingButton component can include up to two buttons: a main button and a secondary button. The main button can be set to full width using the `fullWidth` prop."
          },
          {
            "type": "table",
            "columns": [
              "Layout",
              "Component"
            ],
            "items": [
              {
                "title": "Horizontal",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/FloatingButton/floatingButton_overview_layout_horizontal.png"
                  }
                ]
              },
              {
                "title": "Vertical",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/FloatingButton/floatingButton_overview_layout_vertical.png"
                  }
                ]
              }
            ],
            "title": "Layout",
            "description": "markdown:
When the `secondaryButton` prop is used, the layout can be configured as either vertical or horizontal. In the vertical layout, the secondary button is styled as a link button, and the main button can span the full width of the container by applying the `fullWidth` prop."
          }
        ]
      }
    ]
  }
}