Function Button

  • Button(
        props: Omit<
            Omit<
                Omit<
                    DetailedHTMLProps<
                        ButtonHTMLAttributes<HTMLButtonElement>,
                        HTMLButtonElement,
                    >,
                    "ref",
                > & {
                    ref?:
                        | null
                        | (instance: null | HTMLButtonElement) => void
                        | RefObject<HTMLButtonElement>;
                },
                "outline"
                | "inline"
                | "css",
            > & TransformProps<
                { inline?: boolean
                | "true"; outline?: boolean | "true" },
                {},
            > & {
                css?: CSS<
                    {},
                    {
                        colors: {
                            activeBg: "#e7e7e7";
                            background: "white";
                            blue1: "#038bf4";
                            blue2: "#b7d6f5";
                            blue3: "#dbe6ff";
                            blue4: "#33b4ff";
                            blue5: "#30a2e6";
                            border: "#d5d5d5";
                            buttonBorder: "#bababa";
                            choiceActiveBg: "#f3f3f3";
                            choiceActiveText: "#313131";
                            choiceBg: "#ffffff";
                            choiceBorder: "#cfcfcf";
                            choiceText: "#999999";
                            focusColor: "#dcaf00";
                            green1: "#3ec234";
                            green1Darker: "#38af2f";
                            grey1: "#737373";
                            headerBg: "#efeff0";
                            headerBorder: "#c8c8c9";
                            headerText: "#484848";
                            icon: "#636363";
                            inactiveBg: "#d3d3de";
                            inactiveDarkBg: "#999";
                            inputDisabledBg: "#f3f3f3";
                            inputDisabledText: "#959595";
                            mainColor: "#008ad2";
                            mainColorAlt: "#006AA9";
                            modalBg: "#f7f7f7";
                            modalButtonBg: "#f8f8f8";
                            modalButtonBorder: "#c2c2c2";
                            orange1: "#ff7200";
                            orange1Darker: "#cc5b00";
                            pink1: "#ff388f";
                            pinky1: "#f5c0b7";
                            pinky2: "#e07b67";
                            pinky3: "#ffe1db";
                            popText: "#666";
                            purple1: "#7357e8";
                            red1: "#ea2700";
                            scrollbarsBg: "transparent";
                            scrollbarsThumb: "#737373";
                            selectorActive: "#008ad2";
                            selectorText: "#606060";
                            sub: "#959595";
                            tableStripedBg: "#fafafa";
                            text: "#323232";
                            text2: "#181818";
                            text3: "#000000";
                            toggleBgDisabled: "#f0f0f0";
                            toggleHandleBg: "#e0e0e0";
                            toggleHandleBgDisabled: "#deae84";
                            toggleHandleBorder: "#cdcdcd";
                            toggleHandleBorderDisabled: "#c29f7d";
                            toolbarBg: "#f8f8f8";
                            toolbarBorder: "#ababab";
                            toolButtonText: "#666e80";
                            yellow1: "#ffde9d";
                            yellow2: "#e4a429";
                            yellow3: "#fff5db";
                        };
                    },
                    DefaultThemeMap,
                    {
                        mx: (
                            value: string | number,
                        ) => { marginLeft: string | number; marginRight: string | number };
                        my: (
                            value: string | number,
                        ) => { marginBottom: string | number; marginTop: string | number };
                        px: (
                            value: string | number,
                        ) => { paddingLeft: string | number; paddingRight: string | number };
                        py: (
                            value: string | number,
                        ) => { paddingBottom: string | number; paddingTop: string | number };
                        size: (
                            value: string | number,
                        ) => { height: string | number; width: string | number };
                    },
                >;
            },
            "ref",
        > & RefAttributes<HTMLButtonElement>,
    ): ReactNode

  • Parameters

    • props: Omit<
          Omit<
              Omit<
                  DetailedHTMLProps<
                      ButtonHTMLAttributes<HTMLButtonElement>,
                      HTMLButtonElement,
                  >,
                  "ref",
              > & {
                  ref?:
                      | null
                      | (instance: null | HTMLButtonElement) => void
                      | RefObject<HTMLButtonElement>;
              },
              "outline"
              | "inline"
              | "css",
          > & TransformProps<
              { inline?: boolean
              | "true"; outline?: boolean | "true" },
              {},
          > & {
              css?: CSS<
                  {},
                  {
                      colors: {
                          activeBg: "#e7e7e7";
                          background: "white";
                          blue1: "#038bf4";
                          blue2: "#b7d6f5";
                          blue3: "#dbe6ff";
                          blue4: "#33b4ff";
                          blue5: "#30a2e6";
                          border: "#d5d5d5";
                          buttonBorder: "#bababa";
                          choiceActiveBg: "#f3f3f3";
                          choiceActiveText: "#313131";
                          choiceBg: "#ffffff";
                          choiceBorder: "#cfcfcf";
                          choiceText: "#999999";
                          focusColor: "#dcaf00";
                          green1: "#3ec234";
                          green1Darker: "#38af2f";
                          grey1: "#737373";
                          headerBg: "#efeff0";
                          headerBorder: "#c8c8c9";
                          headerText: "#484848";
                          icon: "#636363";
                          inactiveBg: "#d3d3de";
                          inactiveDarkBg: "#999";
                          inputDisabledBg: "#f3f3f3";
                          inputDisabledText: "#959595";
                          mainColor: "#008ad2";
                          mainColorAlt: "#006AA9";
                          modalBg: "#f7f7f7";
                          modalButtonBg: "#f8f8f8";
                          modalButtonBorder: "#c2c2c2";
                          orange1: "#ff7200";
                          orange1Darker: "#cc5b00";
                          pink1: "#ff388f";
                          pinky1: "#f5c0b7";
                          pinky2: "#e07b67";
                          pinky3: "#ffe1db";
                          popText: "#666";
                          purple1: "#7357e8";
                          red1: "#ea2700";
                          scrollbarsBg: "transparent";
                          scrollbarsThumb: "#737373";
                          selectorActive: "#008ad2";
                          selectorText: "#606060";
                          sub: "#959595";
                          tableStripedBg: "#fafafa";
                          text: "#323232";
                          text2: "#181818";
                          text3: "#000000";
                          toggleBgDisabled: "#f0f0f0";
                          toggleHandleBg: "#e0e0e0";
                          toggleHandleBgDisabled: "#deae84";
                          toggleHandleBorder: "#cdcdcd";
                          toggleHandleBorderDisabled: "#c29f7d";
                          toolbarBg: "#f8f8f8";
                          toolbarBorder: "#ababab";
                          toolButtonText: "#666e80";
                          yellow1: "#ffde9d";
                          yellow2: "#e4a429";
                          yellow3: "#fff5db";
                      };
                  },
                  DefaultThemeMap,
                  {
                      mx: (
                          value: string | number,
                      ) => { marginLeft: string | number; marginRight: string | number };
                      my: (
                          value: string | number,
                      ) => { marginBottom: string | number; marginTop: string | number };
                      px: (
                          value: string | number,
                      ) => { paddingLeft: string | number; paddingRight: string | number };
                      py: (
                          value: string | number,
                      ) => { paddingBottom: string | number; paddingTop: string | number };
                      size: (
                          value: string | number,
                      ) => { height: string | number; width: string | number };
                  },
              >;
          },
          "ref",
      > & RefAttributes<HTMLButtonElement>

    Returns ReactNode

Properties

$$typeof defaultProps? displayName? propTypes?

Properties

Readonly$$typeof

$$typeof: symbol

OptionaldefaultProps

defaultProps?: Partial<
    Omit<
        Omit<
            Omit<
                DetailedHTMLProps<
                    ButtonHTMLAttributes<HTMLButtonElement>,
                    HTMLButtonElement,
                >,
                "ref",
            > & {
                ref?:
                    | null
                    | (instance: (...) | (...)) => void
                    | RefObject<HTMLButtonElement>;
            },
            "outline"
            | "inline"
            | "css",
        > & TransformProps<
            { inline?: boolean
            | "true"; outline?: boolean | "true" },
            {},
        > & {
            css?: CSS<
                {},
                {
                    colors: {
                        activeBg: "#e7e7e7";
                        background: "white";
                        blue1: "#038bf4";
                        blue2: "#b7d6f5";
                        blue3: "#dbe6ff";
                        blue4: "#33b4ff";
                        blue5: "#30a2e6";
                        border: "#d5d5d5";
                        buttonBorder: "#bababa";
                        choiceActiveBg: "#f3f3f3";
                        choiceActiveText: "#313131";
                        choiceBg: "#ffffff";
                        choiceBorder: "#cfcfcf";
                        choiceText: "#999999";
                        focusColor: "#dcaf00";
                        green1: "#3ec234";
                        green1Darker: "#38af2f";
                        grey1: "#737373";
                        headerBg: "#efeff0";
                        headerBorder: "#c8c8c9";
                        headerText: "#484848";
                        icon: "#636363";
                        inactiveBg: "#d3d3de";
                        inactiveDarkBg: "#999";
                        inputDisabledBg: "#f3f3f3";
                        inputDisabledText: "#959595";
                        mainColor: "#008ad2";
                        mainColorAlt: "#006AA9";
                        modalBg: "#f7f7f7";
                        modalButtonBg: "#f8f8f8";
                        modalButtonBorder: "#c2c2c2";
                        orange1: "#ff7200";
                        orange1Darker: "#cc5b00";
                        pink1: "#ff388f";
                        pinky1: "#f5c0b7";
                        pinky2: "#e07b67";
                        pinky3: "#ffe1db";
                        popText: "#666";
                        purple1: "#7357e8";
                        red1: "#ea2700";
                        scrollbarsBg: "transparent";
                        scrollbarsThumb: "#737373";
                        selectorActive: "#008ad2";
                        selectorText: "#606060";
                        sub: "#959595";
                        tableStripedBg: "#fafafa";
                        text: "#323232";
                        text2: "#181818";
                        text3: "#000000";
                        toggleBgDisabled: "#f0f0f0";
                        toggleHandleBg: "#e0e0e0";
                        toggleHandleBgDisabled: "#deae84";
                        toggleHandleBorder: "#cdcdcd";
                        toggleHandleBorderDisabled: "#c29f7d";
                        toolbarBg: "#f8f8f8";
                        toolbarBorder: "#ababab";
                        toolButtonText: "#666e80";
                        yellow1: "#ffde9d";
                        yellow2: "#e4a429";
                        yellow3: "#fff5db";
                    };
                },
                DefaultThemeMap,
                {
                    mx: (value: (...) | (...)) => { marginLeft: ...; marginRight: ... };
                    my: (value: (...) | (...)) => { marginBottom: ...; marginTop: ... };
                    px: (value: (...) | (...)) => { paddingLeft: ...; paddingRight: ... };
                    py: (value: (...) | (...)) => { paddingBottom: ...; paddingTop: ... };
                    size: (value: (...) | (...)) => { height: ...; width: ... };
                },
            >;
        },
        "ref",
    > & RefAttributes<HTMLButtonElement>,
>

Deprecated

Use values for destructuring assignments instead.

OptionaldisplayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

See

Legacy React Docs

OptionalpropTypes

propTypes?: WeakValidationMap<
    Omit<
        Omit<
            Omit<
                DetailedHTMLProps<
                    ButtonHTMLAttributes<HTMLButtonElement>,
                    HTMLButtonElement,
                >,
                "ref",
            > & {
                ref?:
                    | null
                    | (instance: (...) | (...)) => void
                    | RefObject<HTMLButtonElement>;
            },
            "outline"
            | "inline"
            | "css",
        > & TransformProps<
            { inline?: boolean
            | "true"; outline?: boolean | "true" },
            {},
        > & {
            css?: CSS<
                {},
                {
                    colors: {
                        activeBg: "#e7e7e7";
                        background: "white";
                        blue1: "#038bf4";
                        blue2: "#b7d6f5";
                        blue3: "#dbe6ff";
                        blue4: "#33b4ff";
                        blue5: "#30a2e6";
                        border: "#d5d5d5";
                        buttonBorder: "#bababa";
                        choiceActiveBg: "#f3f3f3";
                        choiceActiveText: "#313131";
                        choiceBg: "#ffffff";
                        choiceBorder: "#cfcfcf";
                        choiceText: "#999999";
                        focusColor: "#dcaf00";
                        green1: "#3ec234";
                        green1Darker: "#38af2f";
                        grey1: "#737373";
                        headerBg: "#efeff0";
                        headerBorder: "#c8c8c9";
                        headerText: "#484848";
                        icon: "#636363";
                        inactiveBg: "#d3d3de";
                        inactiveDarkBg: "#999";
                        inputDisabledBg: "#f3f3f3";
                        inputDisabledText: "#959595";
                        mainColor: "#008ad2";
                        mainColorAlt: "#006AA9";
                        modalBg: "#f7f7f7";
                        modalButtonBg: "#f8f8f8";
                        modalButtonBorder: "#c2c2c2";
                        orange1: "#ff7200";
                        orange1Darker: "#cc5b00";
                        pink1: "#ff388f";
                        pinky1: "#f5c0b7";
                        pinky2: "#e07b67";
                        pinky3: "#ffe1db";
                        popText: "#666";
                        purple1: "#7357e8";
                        red1: "#ea2700";
                        scrollbarsBg: "transparent";
                        scrollbarsThumb: "#737373";
                        selectorActive: "#008ad2";
                        selectorText: "#606060";
                        sub: "#959595";
                        tableStripedBg: "#fafafa";
                        text: "#323232";
                        text2: "#181818";
                        text3: "#000000";
                        toggleBgDisabled: "#f0f0f0";
                        toggleHandleBg: "#e0e0e0";
                        toggleHandleBgDisabled: "#deae84";
                        toggleHandleBorder: "#cdcdcd";
                        toggleHandleBorderDisabled: "#c29f7d";
                        toolbarBg: "#f8f8f8";
                        toolbarBorder: "#ababab";
                        toolButtonText: "#666e80";
                        yellow1: "#ffde9d";
                        yellow2: "#e4a429";
                        yellow3: "#fff5db";
                    };
                },
                DefaultThemeMap,
                {
                    mx: (value: (...) | (...)) => { marginLeft: ...; marginRight: ... };
                    my: (value: (...) | (...)) => { marginBottom: ...; marginTop: ... };
                    px: (value: (...) | (...)) => { paddingLeft: ...; paddingRight: ... };
                    py: (value: (...) | (...)) => { paddingBottom: ...; paddingTop: ... };
                    size: (value: (...) | (...)) => { height: ...; width: ... };
                },
            >;
        },
        "ref",
    > & RefAttributes<HTMLButtonElement>,
>

Settings

Member Visibility

On This Page

Properties