{
  "name": "Button",
  "category": "controls",
  "description": "Customizable button component that handles press events",
  "extends": ["basic/TouchableOpacity"],
  "modifiers": ["margin", "background"],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx",
  "images": [
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Sizes.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Typographies.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Outlines.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Corners.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Custom.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Inspirations.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Round.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Full.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Animated.gif?raw=true"
  ],
  "props": [
    {
      "name": "label",
      "type": "string",
      "description": "Text to show inside the button"
    },
    {
      "name": "color",
      "type": "string",
      "description": "The Button text color (inherited from Text component)"
    },
    {
      "name": "iconSource",
      "type": "ImageProps['source'] | Function",
      "description": "Icon image source or a callback function that returns a source"
    },
    {
      "name": "iconStyle",
      "type": "ImageStyle",
      "description": "Icon image style"
    },
    {
      "name": "iconProps",
      "type": "Partial<ImageProps>",
      "description": "Icon image props"
    },
    {
      "name": "iconOnRight",
      "type": "boolean",
      "description": "Should the icon be right to the label"
    },
    {
      "name": "supportRTL",
      "type": "boolean",
      "description": "whether the icon should flip horizontally on RTL locals"
    },
    {
      "name": "backgroundColor",
      "type": "string",
      "description": "Color of the button background"
    },
    {
      "name": "disabledBackgroundColor",
      "type": "string",
      "description": "Color of the disabled button background"
    },
    {
      "name": "size",
      "type": "ButtonSize",
      "description": "Size of the button [large, medium, small, xSmall]"
    },
    {
      "name": "borderRadius",
      "type": "number",
      "description": "Custom border radius."
    },
    {
      "name": "onPress",
      "type": "(props: any) => void",
      "description": "Actions handler"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "description": "Disable interactions for the component"
    },
    {
      "name": "outline",
      "type": "boolean",
      "description": "Button will have outline style"
    },
    {
      "name": "outlineColor",
      "type": "string",
      "description": "The outline color"
    },
    {
      "name": "outlineWidth",
      "type": "number",
      "description": "The outline width"
    },
    {
      "name": "link",
      "type": "boolean",
      "description": "Button will look like a link"
    },
    {
      "name": "hyperlink",
      "type": "boolean",
      "description": "Button will look like a hyperlink"
    },
    {
      "name": "linkColor",
      "type": "string",
      "description": "label color for when it's displayed as link or hyperlink"
    },
    {
      "name": "labelStyle",
      "type": "TextStyle",
      "description": "Additional styles for label text"
    },
    {
      "name": "labelProps",
      "type": "TextProps",
      "description": "Props that will be passed to the button's Text label."
    },
    {
      "name": "fullWidth",
      "type": "boolean",
      "description": "should the button act as a coast to coast button (no border radius)"
    },
    {
      "name": "round",
      "type": "boolean",
      "description": "should the button be a round button"
    },
    {
      "name": "enableShadow",
      "type": "boolean",
      "description": "Control shadow visibility"
    },
    {
      "name": "avoidInnerPadding",
      "type": "boolean",
      "description": "avoid inner button padding"
    },
    {
      "name": "avoidMinWidth",
      "type": "boolean",
      "description": "avoid minimum width constraints"
    },
    {
      "name": "getActiveBackgroundColor",
      "type": "(backgroundColor: string, props: any) => string",
      "description": "callback for getting activeBackgroundColor \\(e.g. \\(calculatedBackgroundColor, prop) => \\{...\\})\\. Better set using ThemeManager"
    },
    {
      "name": "animateLayout",
      "type": "boolean",
      "description": "should animate layout change"
    },
    {
      "name": "animateTo",
      "type": "ButtonAnimationDirection",
      "description": "the direction of the animation ('left' and 'right' will effect the button's own alignment)"
    },
    {
      "name": "customBackground",
      "type": "React.ReactElement",
      "description": "Custom element to render as button background (takes precedence over backgroundColor)"
    }
  ],
  "snippet": [
    "<View flex>",
    "<View flex center gap-s5>",
    "<Button label={'Press'} backgroundColor={Colors.red30}/>",
    "<Button label={'Press'} outline size={Button.sizes.medium}/>",
    "<Button label={'Press'}  iconSource={Assets.icons.demo.star}/>",
    "</View>",
    "<View flex bottom>",
    "<Button fullWidth label='Full Width Button'/>",
    "</View>",
    "</View>"
  ],
  "docs": {
    "hero": {
      "title": "Button",
      "description": "A button triggers an event or action.\n\nPrimary buttons that indicate a call to action, are the most prominent. Secondary buttons, which indicate less commonly used actions, should be less prominent than primary buttons, second in hierarchy.\n\nButtons are placed where a user should expect them, i.e. in close proximity to the other elements that the action affects.",
      "type": "hero",
      "layout": "horizontal",
      "content": [
        {
          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_preview.png"
        }
      ]
    },
    "tabs": [
      {
        "title": "Overview",
        "sections": [
          {
            "type": "table",
            "columns": ["Type", "Component"],
            "items": [
              {
                "title": "Main Button",
                "description": "The default button style, used for most actions.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_main.png"
                  }
                ]
              },
              {
                "title": "Icon Button",
                "description": "Icon buttons are round buttons without a text label.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_iconButton.png"
                  }
                ]
              },
              {
                "title": "Link Button",
                "description": "Link buttons are typically used for minor actions.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_linkButton.png"
                  }
                ]
              },
              {
                "title": "Full-Width Button",
                "description": "Full Width buttons are sticky on the bottom of the screens.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_fullButton.png"
                  }
                ]
              }
            ],
            "title": "Button Types",
            "description": "Buttons are available in different types, each designed for specific actions and purposes."
          },
          {
            "type": "section",
            "title": "Button",
            "description": ""
          },
          {
            "type": "table",
            "columns": ["Property", "Default", "Outline"],
            "items": [
              {
                "title": "Active",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_mainActivePrimary.png"
                  },
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_mainActiveSecondary.png"
                  }
                ]
              },
              {
                "title": "Disabled",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_mainDisabledPrimary.png"
                  },
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_mainDisabledSecondary.png"
                  }
                ]
              }
            ],
            "title": "",
            "description": "",
            "name": "Main"
          },
          {
            "type": "table",
            "columns": ["Property", "Component"],
            "items": [
              {
                "title": "Large",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_sizes_large.png"
                  }
                ]
              },
              {
                "title": "Medium",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_sizes_medium.png"
                  }
                ]
              },
              {
                "title": "Small",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_sizes_small.png"
                  }
                ]
              }
            ],
            "title": "Sizes",
            "description": ""
          },
          {
            "type": "table",
            "columns": ["Property", "Component"],
            "items": [
              {
                "title": "Icon prefix",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_accessories_iconPrefix.png"
                  }
                ]
              },
              {
                "title": "Icon suffix",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_accessories_iconSuffix.png"
                  }
                ],
                "description": ""
              }
            ],
            "title": "Accessories",
            "description": ""
          },
          {
            "type": "section",
            "title": "Icon Button",
            "description": "Icon buttons are round buttons without a text label."
          },
          {
            "type": "table",
            "columns": ["Property", "Component"],
            "items": [
              {
                "title": "Default",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_priority_primary.png"
                  }
                ]
              },
              {
                "title": "Outline",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_priority_secondary.png"
                  }
                ]
              }
            ],
            "title": "Priority",
            "description": ""
          },
          {
            "type": "section",
            "title": "States",
            "description": ""
          },
          {
            "type": "table",
            "columns": ["Property", "Default", "Outline"],
            "items": [
              {
                "title": "Active",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_mainActivePrimary.png"
                  },
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_mainActiveSecondary.png"
                  }
                ]
              },
              {
                "title": "Disabled",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_mainDisabledPrimary.png"
                  },
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_mainDisabledSecondary.png"
                  }
                ]
              }
            ],
            "title": "",
            "description": "",
            "name": "Main"
          },
          {
            "type": "section",
            "title": "Usage Examples",
            "description": "",
            "content": [
              {
                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_usageExamples.png"
              }
            ]
          },
          {
            "type": "section",
            "title": "Link Button",
            "description": "Link buttons are typically used for a somewhat minor actions."
          },
          {
            "type": "table",
            "columns": ["Property", "Component"],
            "items": [
              {
                "title": "Main",
                "description": "text style: bodyBold, $textPrimary",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_linkButton_presets_main.png"
                  }
                ]
              },
              {
                "title": "Disabled",
                "description": "text style: bodyBold, $textDisabled",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_linkButton_presets_disabled.png"
                  }
                ]
              }
            ],
            "title": "Presets"
          },
          {
            "type": "table",
            "columns": ["Property", "Component"],
            "items": [
              {
                "title": "Regular",
                "description": "Default",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_linkButton_sizes_regular.png"
                  }
                ]
              },
              {
                "title": "Small",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_linkButton_sizes_small.png"
                  }
                ]
              }
            ],
            "title": "Sizes"
          },
          {
            "type": "table",
            "columns": ["Property", "Regular", "Small (bodyBoldSmall)"],
            "items": [
              {
                "title": "Icon prefix",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_linkButton_props_prefixRegular.png"
                  },
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_linkButton_props_prefixSmall.png"
                  }
                ]
              },
              {
                "title": "Icon suffix",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_linkButton_props_suffixRegular.png"
                  },
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_linkButton_props_suffixRegular.png"
                  }
                ]
              }
            ],
            "title": "Accessories",
            "description": ""
          },
          {
            "type": "section",
            "title": "Full-Width Button",
            "description": "Full-Width buttons are sticky on the bottom of the screens.They are usually used for primary actions on management screens, e.g. adding a new item to a list.\nThey are great to use on screens with potentially long lists, since they stick to the bottom and are always visible."
          },
          {
            "type": "table",
            "columns": ["Property", "Component"],
            "items": [
              {
                "title": "Main",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_fullWidth_presets_main.png"
                  }
                ]
              }
            ],
            "title": "Presets",
            "description": ""
          },
          {
            "type": "table",
            "columns": ["Property", "Component"],
            "items": [
              {
                "title": "Active",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_fullWidth_states_active.png"
                  }
                ]
              },
              {
                "title": "Disabled",
                "description": "",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_fullWidth_states_disabled.png"
                  }
                ]
              }
            ],
            "title": "States"
          },
          {
            "type": "section",
            "title": "Usage Examples",
            "content": [
              {
                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_fullWidth_usageExamples.png"
              }
            ]
          }
        ]
      },
      {
        "title": "UX Guidelines",
        "sections": [
          {
            "type": "list",
            "items": [
              {
                "title": "Unclear buttons hierarchy",
                "description": "Have a clear hierarchy of your buttons. Decide which one of the actions in your screen is the main one and use a Primary button for it. All other buttons should be secondary and tertiary in the way they look. Destructive actions should be treated likewise. ",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_UX_dosDonts_hierarchy.png"
                  }
                ]
              },
              {
                "title": "Inappropriate buttons layout",
                "description": "Make sure you’re using a layout that can accommodate actions text. ",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_UX_dosDonts_layout.png"
                  }
                ]
              },
              {
                "title": "Action text truncation/ellipsis",
                "description": "Action text truncation or ellipsis should be avoided at all costs.\nActions should be clear and down to the point. In case the action is complex, consider displaying an explanatory text outside the actual button component. ",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_UX_dosDonts_truncation.png"
                  }
                ]
              }
            ],
            "title": "Do’s & Don'ts",
            "description": "There are a few things to avoid when implementing buttons in your screen:"
          },
          {
            "type": "list",
            "items": [
              {
                "title": "Full Width Button",
                "description": "Medium prominence. Used in management screens for the main action, e.g. ‘Add New’",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_UX_comparison1.png"
                  }
                ]
              },
              {
                "title": "Floating Button",
                "description": "High prominence. Used as the main CTA on the screen, e.g. ‘Join Now’, ‘Create’",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_UX_comparison2.png"
                  }
                ]
              }
            ],
            "title": "Full-Width Vs. Floating Button",
            "description": "Selecting the right button style for your needs",
            "layout": "horizontal"
          }
        ]
      }
    ]
  }
}