Interface ButtonButtonProps

interface ButtonButtonProps {
    badge?: boolean;
    children?: ReactNode;
    component?: "button";
    disabled?: boolean;
    fontWeight?: "medium" | "bold" | "normal" | "light";
    form?: string;
    icon?: ReactElement<unknown, string | JSXElementConstructor<any>>;
    inline?: boolean;
    lowercase?: boolean;
    noPadding?: boolean;
    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
    role?: AriaRole;
    size?: "medium" | "small" | "tiny" | "large" | "huge";
    title?: string;
    type: undefined | "button" | "submit" | "reset";
    variant?:
        | "link"
        | "primary"
        | "secondary"
        | "subscription"
        | "tertiary"
        | "quaternary";
}

Hierarchy

  • ButtonBaseProps
    • ButtonButtonProps

Properties

badge? children? component? disabled? fontWeight? form? icon? inline? lowercase? noPadding? onClick? role? size? title? type variant?

Properties

Optionalbadge

badge?: boolean

If true, shows a dot indicating that there is something new.

Refs: https://setproduct.com/blog/badge-ui-design

Optionalchildren

children?: ReactNode

Optionalcomponent

component?: "button"

Optionaldisabled

disabled?: boolean

OptionalfontWeight

fontWeight?: "medium" | "bold" | "normal" | "light"

Legt das Schriftgewicht des Buttons fest.

Default

"normal"

Optionalform

form?: string

Optionalicon

icon?: ReactElement<unknown, string | JSXElementConstructor<any>>

Optionalinline

inline?: boolean

Optionallowercase

lowercase?: boolean

Wenn true, wird der Text in Kleinbuchstaben angezeigt.

Default

false

OptionalnoPadding

noPadding?: boolean

OptionalonClick

onClick?: (event: MouseEvent<HTMLButtonElement>) => void

Optionalrole

role?: AriaRole

See aria roles: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

Optionalsize

size?: "medium" | "small" | "tiny" | "large" | "huge"

Optionaltitle

title?: string

type

type: undefined | "button" | "submit" | "reset"

Mandatory because the default type is "submit", which is not ideal.

Optionalvariant

variant?:
    | "link"
    | "primary"
    | "secondary"
    | "subscription"
    | "tertiary"
    | "quaternary"

Settings

Member Visibility

On This Page

Properties