#Button

import Button from "@poodle/ui/Button";

#Variant

The button can change to a defined style via props variant.

Built in styles are default, fill, outline. If you do not set variant, the button will use the variant default as default.

The button also find the variant style in theme.Button.variants object.

#Default

The default button is text button.

Typically, use it with unimportant actions.

#Filled

Filled buttons normally are primary buttons for your app.

#Outline

Outline buttons have more interactive than text buttons, but they are less important than a primary button.

#Button with icon

Add icon to the button using endIcon and startIcon prop.

#Sizes

Change button size via prop sizeStyle.

Default button sizes are s, m, l. If you do not set size, the button will use the size m as default.

Button will change to <a> tag if prop href is set.

If the button disabled prop set to true, the button will render as <button> tag. <a> tag does not support disable.

#Theming

Please check theming component document here.

export type ButtonStyleKeys =
  | "root"
  | "content"
  | "icon"
  | "startIcon"
  | "endIcon"


export interface ButtonThemeConfig
  extends StandardThemeConfig<ButtonStyleKeys, ButtonProps> {}

#Props

#Local Props

NameTypeDescription
childrenReact.ReactNode
classNamestringClass apply to root element.
colorStyle"default" \| "primary" \| "negative" \| "positive" \| "warn" \| stringChange button color. Built-in options are "default" | "primary" | "negative" | "positive" | "warn".

Default is "default".
contentPropsBoxPropsCustom props for content element
endIconReact.ReactNodeAdd icon to end of the button.
iconPropsBoxPropsCustom props for icon element
sizeStyle"s" \| "m" \| "l" \| stringChange button size. Built-in options are "s" | "m" | "l".

Default is "m".
startIconReact.ReactNodeAdd icon to start of the button.
themeThemeConfig
themeExtendThemeConfig
variant"default" \| "outline" \| "fill" \| stringChange button variant. Built-in options are "default" | "outline" | "fill".

Default is "default".

#Full Props

export interface ButtonProps
    extends Omit<
            React.AnchorHTMLAttributes<HTMLAnchorElement> &
                React.ButtonHTMLAttributes<HTMLButtonElement>,
            keyof BoxProps
        >,
        BoxProps,
        LocalButtonProps {}