• NOTE: Exotic components are not callable.

    Parameters

    • props: BackgroundColorProps<{
          borderRadii: {
              lg: number;
              md: number;
              sm: number;
              xl: number;
              xs: number;
              xxl: number;
          };
          colors: {
              accentButtonColor: string;
              accentButtonTextColor: string;
              background: string;
              backgroundHighlight: string;
              backgroundInverted: string;
              black: string;
              border: string;
              buttonBackgroundColor: string;
              buttonBorderColor: string;
              buttonTextColor: string;
              error: string;
              iconHighlight: string;
              iconPrimary: string;
              iconSecondary: string;
              labelBackground: string;
              linkPrimary: string;
              red: string;
              textPrimary: string;
              textSecondary: string;
              transparent: string;
              warning: string;
              white: string;
          };
          spacing: {
              lg: number;
              md: number;
              none: number;
              sm: number;
              xl: number;
              xmd: number;
              xs: number;
              xxl: number;
              xxs: number;
          };
          textVariants: {
              bodyLarge: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodyLargeBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmall: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallSecondary: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              defaults: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              error: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              header: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              headerBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              link: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  letterSpacing: number;
                  lineHeight: number;
              };
              subHeader: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
          };
      }> & OpacityProps<{
          borderRadii: {
              lg: number;
              md: number;
              sm: number;
              xl: number;
              xs: number;
              xxl: number;
          };
          colors: {
              accentButtonColor: string;
              accentButtonTextColor: string;
              background: string;
              backgroundHighlight: string;
              backgroundInverted: string;
              black: string;
              border: string;
              buttonBackgroundColor: string;
              buttonBorderColor: string;
              buttonTextColor: string;
              error: string;
              iconHighlight: string;
              iconPrimary: string;
              iconSecondary: string;
              labelBackground: string;
              linkPrimary: string;
              red: string;
              textPrimary: string;
              textSecondary: string;
              transparent: string;
              warning: string;
              white: string;
          };
          spacing: {
              lg: number;
              md: number;
              none: number;
              sm: number;
              xl: number;
              xmd: number;
              xs: number;
              xxl: number;
              xxs: number;
          };
          textVariants: {
              bodyLarge: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodyLargeBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmall: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallSecondary: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              defaults: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              error: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              header: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              headerBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              link: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  letterSpacing: number;
                  lineHeight: number;
              };
              subHeader: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
          };
      }> & VisibleProps<{
          borderRadii: {
              lg: number;
              md: number;
              sm: number;
              xl: number;
              xs: number;
              xxl: number;
          };
          colors: {
              accentButtonColor: string;
              accentButtonTextColor: string;
              background: string;
              backgroundHighlight: string;
              backgroundInverted: string;
              black: string;
              border: string;
              buttonBackgroundColor: string;
              buttonBorderColor: string;
              buttonTextColor: string;
              error: string;
              iconHighlight: string;
              iconPrimary: string;
              iconSecondary: string;
              labelBackground: string;
              linkPrimary: string;
              red: string;
              textPrimary: string;
              textSecondary: string;
              transparent: string;
              warning: string;
              white: string;
          };
          spacing: {
              lg: number;
              md: number;
              none: number;
              sm: number;
              xl: number;
              xmd: number;
              xs: number;
              xxl: number;
              xxs: number;
          };
          textVariants: {
              bodyLarge: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodyLargeBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmall: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallSecondary: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              defaults: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              error: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              header: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              headerBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              link: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  letterSpacing: number;
                  lineHeight: number;
              };
              subHeader: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
          };
      }> & LayoutProps<{
          borderRadii: {
              lg: number;
              md: number;
              sm: number;
              xl: number;
              xs: number;
              xxl: number;
          };
          colors: {
              accentButtonColor: string;
              accentButtonTextColor: string;
              background: string;
              backgroundHighlight: string;
              backgroundInverted: string;
              black: string;
              border: string;
              buttonBackgroundColor: string;
              buttonBorderColor: string;
              buttonTextColor: string;
              error: string;
              iconHighlight: string;
              iconPrimary: string;
              iconSecondary: string;
              labelBackground: string;
              linkPrimary: string;
              red: string;
              textPrimary: string;
              textSecondary: string;
              transparent: string;
              warning: string;
              white: string;
          };
          spacing: {
              lg: number;
              md: number;
              none: number;
              sm: number;
              xl: number;
              xmd: number;
              xs: number;
              xxl: number;
              xxs: number;
          };
          textVariants: {
              bodyLarge: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodyLargeBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmall: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallSecondary: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              defaults: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              error: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              header: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              headerBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              link: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  letterSpacing: number;
                  lineHeight: number;
              };
              subHeader: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
          };
      }> & SpacingProps<{
          borderRadii: {
              lg: number;
              md: number;
              sm: number;
              xl: number;
              xs: number;
              xxl: number;
          };
          colors: {
              accentButtonColor: string;
              accentButtonTextColor: string;
              background: string;
              backgroundHighlight: string;
              backgroundInverted: string;
              black: string;
              border: string;
              buttonBackgroundColor: string;
              buttonBorderColor: string;
              buttonTextColor: string;
              error: string;
              iconHighlight: string;
              iconPrimary: string;
              iconSecondary: string;
              labelBackground: string;
              linkPrimary: string;
              red: string;
              textPrimary: string;
              textSecondary: string;
              transparent: string;
              warning: string;
              white: string;
          };
          spacing: {
              lg: number;
              md: number;
              none: number;
              sm: number;
              xl: number;
              xmd: number;
              xs: number;
              xxl: number;
              xxs: number;
          };
          textVariants: {
              bodyLarge: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodyLargeBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmall: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallSecondary: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              defaults: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              error: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              header: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              headerBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              link: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  letterSpacing: number;
                  lineHeight: number;
              };
              subHeader: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
          };
      }> & {} & {} & {} & {} & {} & {} & {} & SpacingShorthandProps<{
          borderRadii: {
              lg: number;
              md: number;
              sm: number;
              xl: number;
              xs: number;
              xxl: number;
          };
          colors: {
              accentButtonColor: string;
              accentButtonTextColor: string;
              background: string;
              backgroundHighlight: string;
              backgroundInverted: string;
              black: string;
              border: string;
              buttonBackgroundColor: string;
              buttonBorderColor: string;
              buttonTextColor: string;
              error: string;
              iconHighlight: string;
              iconPrimary: string;
              iconSecondary: string;
              labelBackground: string;
              linkPrimary: string;
              red: string;
              textPrimary: string;
              textSecondary: string;
              transparent: string;
              warning: string;
              white: string;
          };
          spacing: {
              lg: number;
              md: number;
              none: number;
              sm: number;
              xl: number;
              xmd: number;
              xs: number;
              xxl: number;
              xxs: number;
          };
          textVariants: {
              bodyLarge: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodyLargeBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmall: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallSecondary: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              defaults: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              error: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              header: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              headerBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              link: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  letterSpacing: number;
                  lineHeight: number;
              };
              subHeader: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
          };
      }> & BackgroundColorShorthandProps<{
          borderRadii: {
              lg: number;
              md: number;
              sm: number;
              xl: number;
              xs: number;
              xxl: number;
          };
          colors: {
              accentButtonColor: string;
              accentButtonTextColor: string;
              background: string;
              backgroundHighlight: string;
              backgroundInverted: string;
              black: string;
              border: string;
              buttonBackgroundColor: string;
              buttonBorderColor: string;
              buttonTextColor: string;
              error: string;
              iconHighlight: string;
              iconPrimary: string;
              iconSecondary: string;
              labelBackground: string;
              linkPrimary: string;
              red: string;
              textPrimary: string;
              textSecondary: string;
              transparent: string;
              warning: string;
              white: string;
          };
          spacing: {
              lg: number;
              md: number;
              none: number;
              sm: number;
              xl: number;
              xmd: number;
              xs: number;
              xxl: number;
              xxs: number;
          };
          textVariants: {
              bodyLarge: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodyLargeBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmall: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              bodySmallSecondary: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              defaults: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              error: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
                  textAlign: string;
              };
              header: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              headerBold: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
              link: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  letterSpacing: number;
                  lineHeight: number;
              };
              subHeader: {
                  color: string;
                  fontFamily: undefined | string;
                  fontSize: number;
                  fontWeight: string;
                  lineHeight: number;
              };
          };
      }> & Omit<TouchableOpacityProps, "left" | "width" | "height" | "minWidth" | "maxWidth" | "minHeight" | "maxHeight" | "overflow" | "aspectRatio" | "alignContent" | "alignItems" | "alignSelf" | "justifyContent" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginHorizontal" | "marginVertical" | "marginStart" | "marginEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingHorizontal" | "paddingVertical" | "paddingStart" | "paddingEnd" | "columnGap" | "rowGap" | "gap" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopWidth" | "borderStartWidth" | "borderEndWidth" | "borderWidth" | "borderColor" | "borderTopColor" | "borderRightColor" | "borderLeftColor" | "borderBottomColor" | "borderStartColor" | "borderEndColor" | "borderRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomStartRadius" | "borderBottomEndRadius" | "borderTopStartRadius" | "borderTopEndRadius" | "shadowOpacity" | "shadowOffset" | "shadowRadius" | "elevation" | "position" | "top" | "right" | "bottom" | "start" | "end" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "ms" | "me" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "ps" | "pe" | "g" | "rg" | "cg" | "backgroundColor" | "opacity" | "visible" | "shadowColor" | "zIndex" | "bg"> & RefAttributes<unknown>

    Returns ReactNode

Generated using TypeDoc