@app/corecomponentsButton

Button

import { Button } from '@app/components/Button'
Component Props
type
enum
text
string
size
enum
href
string
iconLeft
Name of an icon registered in the icon registry
enum
iconRight
Name of an icon registered in the icon registry
enum
disabled
boolean
fullWidth
boolean
className
string
textClassName
string
iconSize
number
hitSlop
number
target
enum
replace
boolean
push
boolean
Show Props Schema
const ButtonProps = z.object({
    type: z
        .enum(["primary", "secondary", "outline", "link", "warn", "danger", "info", "success"])
        .default("primary"),
    text: z
        .string()
        .optional()
        .example("Press me"),
    size: z
        .enum(["sm", "md", "lg"])
        .default("md"),
    href: z
        .string()
        .url()
        .optional()
        .example("https://fullproduct.dev"),
    iconLeft: z
        .enum(["AddFilled", "ArrowLeftFilled", "ArrowRightFilled", "CheckFilled", "ChevronDownFilled", "ChevronUpFilled", "RemoveFilled", "UndoFilled"])
        .optional()
        .describe("Name of an icon registered in the icon registry"),
    iconRight: z
        .enum(["AddFilled", "ArrowLeftFilled", "ArrowRightFilled", "CheckFilled", "ChevronDownFilled", "ChevronUpFilled", "RemoveFilled", "UndoFilled"])
        .optional()
        .example("ArrowRightFilled")
        .describe("Name of an icon registered in the icon registry"),
    disabled: z
        .boolean()
        .optional(),
    fullWidth: z
        .boolean()
        .optional(),
    className: z
        .string()
        .optional(),
    textClassName: z
        .string()
        .optional(),
    iconSize: z
        .number()
        .default(16),
    hitSlop: z
        .number()
        .default(10),
    target: z
        .enum(["_blank", "_self", "_parent", "_top"])
        .default("_self")
        .example("_blank"),
    replace: z
        .boolean()
        .optional(),
    push: z
        .boolean()
        .optional(),
})

💡 Could be handy to copy-paste into an AI chat?

Show Props Types
{
    type?: "primary" | "secondary" | "outline" | "link" | "warn" | "danger" | "info" | "success";
    text?: string;
    size?: "sm" | "md" | "lg";
    href?: string | undefined;
    /** Name of an icon registered in the icon registry */
    iconLeft?: ("AddFilled" | "ArrowLeftFilled" | "ArrowRightFilled" | "CheckFilled" | "ChevronDownFilled" | "ChevronUpFilled" | "RemoveFilled" | "UndoFilled") | undefined;
    /** Name of an icon registered in the icon registry */
    iconRight?: ("AddFilled" | "ArrowLeftFilled" | "ArrowRightFilled" | "CheckFilled" | "ChevronDownFilled" | "ChevronUpFilled" | "RemoveFilled" | "UndoFilled") | undefined;
    disabled?: boolean;
    fullWidth?: boolean;
    className?: string | undefined;
    textClassName?: string | undefined;
    iconSize?: number;
    hitSlop?: number;
    target?: "_blank" | "_self" | "_parent" | "_top";
    replace?: boolean | undefined;
    push?: boolean | undefined;
}

💡 Could be handy to copy-paste into an AI chat?

File Location

You can find the source of the Button component in the following location:

        • Button.tsx

Developer Notes

children vs text prop

You can pass either props.children or props.text to the Button component. If you pass props.children, it will render the children as the button content. This supports JSX and other React Components. Whereas props.text only supports actual text strings.

If you pass both, props.children will be used instead props.text.

style prop

Instead of using just className, you can also pass a style prop. We will combine the styles from className and style props. This allows you to use inline styles for dynamic styling while still applying CSS classes.

If both classNames and style prop influence the same style, the style prop will take precedence.

onPress event handlers

Just like react-native’s Pressable, our Button component supports the onPress prop, alongside other event handlers:

  • onPress() - Called when a touch is released.
  • onPressIn() - Called when a touch is initiated.
  • onPressOut() - Called when a touch is released, after onPressIn.
  • onHoverIn() - Called when the pointer enters the button area.
  • onHoverOut() - Called when the pointer leaves the button area.
  • onLongPress() - Called when a long press gesture is detected.
  • onBlur() - Called when the button loses focus.
  • onFocus() - Called when the button gains focus.

Naturally, when props.disabled is true, all event handlers will be ignored.

If you pass both href and onPress props, we will try to execute both. Giving preference to the onPress handler first.

Other

Disclaimer - Automatic Docgen

🤖

These dynamic component docs were auto-generated with npm run regenerate-docs. You can hook into automatic docgen by exporting getDocumentationProps from a component file. You’ll want to provide example props from the ComponentProps zod schema, e.g:

Button.tsx
/* --- Docs ---------------------- */
 
export const getDocumentationProps = ButtonProps.documentationProps('Button')
Code GeneratorsTextInput