ButtonFabric component

Component for rendering a button.

📝 Signature

ButtonFabric(props: {
  styles: {
    baseColor: string;
    textColor?: string;
    outlineSize?: number;
    roundness?: number;
    mode?: "fill" | "outline";
    hover?: "fill" | "outline";
    scale?: number;
    group?: "start" | "middle" | "end";
  };
  label?: string;
  description?: string;
  icon?: JSX.Element;
  iconPosition?: "left" | "right";
  image?: string;
  emoji?: string;
  size?: "small" | "medium" | "large";
  disabled?: boolean;
  tabIndex?: number;
  ariaDescribedBy?: string;
  hyperlink?: {
    url: string;
    target?: "self" | "blank";
  };
  onClick?: () => void;
  onFocus?: (e: FocusEvent) => void;
  onBlur?: (e: FocusEvent) => void;
  onAutoFocus?: (el: HTMLButtonElement | null) => void;
  onKeyDown?: (e: KeyboardEvent<HTMLButtonElement>) => void;
  onTab?: () => void;
  onCancel?: () => void;
}): JSX.Element

📇 Props

Name	Type	Optional	Description
styles	object	No	Specifies the styles for the button component. Supports the following styles: - baseColor: Base color for the component; - textColor: Optional text color for the component; - outlineSize: Optional outline size in pixels for the component; - roundness: Optional roundness in pixels for the component; - mode: Optional default mode for the component (defaults to fill); - hover: Optional hover mode for the component (defaults to fill); - scale: Optional scale factor for the component (defaults to 1); - group: Optional position for the component when the component is shown as part of a group.
label	string	Yes	Optional label that is shown in the button.
description	string	Yes	Optional description that is shown in the button.
icon	JSX.Element	Yes	Optional icon that is shown in the button.
iconPosition	"left" | "right"	Yes	Optional icon position when an icon is shown in the button.
image	string	Yes	Optional image that is shown in the button.
emoji	string	Yes	Optional emoji that is shown in the button.
size	"small" | "medium" | "large"	Yes	Optional size of the button.
disabled	boolean	Yes	Specifies if the component is disabled.
tabIndex	number	Yes	Specifies the tabindex for the component.
ariaDescribedBy	string	Yes	Specifies the aria-describedby identifier of the element that describes the component.
hyperlink	object	Yes	Optional hyperlink for the button component. Supports the following items: - url: URL to open; - target: Optional target to open in.
onClick	() => void	Yes	Invoked when the component is clicked.
onFocus	(e: FocusEvent) => void	Yes	Invoked when the component gets focus.
onBlur	(e: FocusEvent) => void	Yes	Invoked when the component loses focus.
onAutoFocus	(el: HTMLButtonElement | null) => void	Yes	Invoked when the HTML element of the component is available for auto-focus.
onKeyDown	(e: KeyboardEvent<HTMLButtonElement>) => void	Yes	Invoked when the user presses a key while the button has focus.
onTab	() => void	Yes	Invoked when the user presses the Tab key.
onCancel	() => void	Yes	Invoked when the user presses the Shift + Tab key combination (this event is often used to go to the previous input control in a form).

↩️ Return value

Returns the JSX.Element for the component.

👩‍💻 Example

import { ButtonFabric } from "@tripetto/runner-fabric/components/button";

const ButtonExample = () => (
  <ButtonFabric
    styles={{
      baseColor: "black"
    }}
    onClick={() => console.log("Button clicked!")}
  />
);