Skip to main content

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​

NameTypeOptionalDescription
stylesobjectNoSpecifies 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.
labelstringYesOptional label that is shown in the button.
descriptionstringYesOptional description that is shown in the button.
iconJSX.ElementYesOptional icon that is shown in the button.
iconPosition"left" | "right"YesOptional icon position when an icon is shown in the button.
imagestringYesOptional image that is shown in the button.
emojistringYesOptional emoji that is shown in the button.
size"small" | "medium" | "large"YesOptional size of the button.
disabledbooleanYesSpecifies if the component is disabled.
tabIndexnumberYesSpecifies the tabindex for the component.
ariaDescribedBystringYesSpecifies the aria-describedby identifier of the element that describes the component.
hyperlinkobjectYesOptional hyperlink for the button component. Supports the following items:
- url: URL to open;
- target: Optional target to open in.
onClick() => voidYesInvoked when the component is clicked.
onFocus(e: FocusEvent) => voidYesInvoked when the component gets focus.
onBlur(e: FocusEvent) => voidYesInvoked when the component loses focus.
onAutoFocus(el: HTMLButtonElement | null) => voidYesInvoked when the HTML element of the component is available for auto-focus.
onKeyDown(e: KeyboardEvent<HTMLButtonElement>) => voidYesInvoked when the user presses a key while the button has focus.
onTab() => voidYesInvoked when the user presses the Tab key.
onCancel() => voidYesInvoked 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!")}
/>
);