Button

Primitive button component.

Hello, World!

<Button>Hello, World!</Button>

Note: The display property has been changed from inline-block to inline-flex to allow for proper child alignment. Keep this in mind when using flex parents.

---

Props

• alignContent
• as
• block
• disabled
• formSize
• iconLeft
• iconOnly
• iconRight
• intent
• isActive
• isLoading

alignContent

alignContent?: "left" | "center" | "right"

Align content within the button.

Default is "center".

Note: Button is an inline-flex element, so setting alignContent won't visually show its effect without adding extra width (like adding the block prop).

<Button alignContent="left" block>Left</Button>
<Button alignContent="center" block>Center</Button>
<Button alignContent="right" block>Right</Button>

as

as?: "button" | "a" | Link

The as prop allows you to render a button as a different HTML element or component. Currently, the following values are supported: "button", "a", and Link.

Defaults to "button".

as="button"

Render as a button element.

Hello, World!

<Button as="button">Hello, World!</Button>

as="a"

Render as an anchor element.

<Button as="a" href="https://remix.run/" target="_blank">
  Open remix.run
</Button>

as={Link}

Render as a react-router Link component. Remix is used here, but you can use react-router-dom instead. Element must be passed in.

<Button as={Link} to="/">
  Go to home
</Button>

block

block?: boolean

The block prop makes the button take up the full width of its container.

width: 100% and display: block are applied to the button.

Block button

<Button block>Block</Button>

disabled

disabled?: boolean

As the name suggests, the disabled prop disables the button. The button becomes non-interactive.

<Button>Enabled</Button>
<Button disabled>Disabled</Button>

formSize

formSize?: "sm" | "md" | "lg"

Controls the size of the button. Default is "md".

<Button formSize="sm">Small</Button>
<Button formSize="md">Medium</Button>
<Button formSize="lg">Large</Button>

iconLeft

iconLeft?: Icons | IconProps | React.ReactNode;

Icon to be displayed on the left side of the button.

Icon left

<Button iconLeft="star">Icon left</Button>

iconOnly

iconOnly?: Icons | IconProps | React.ReactNode;

Changes button to be a square icon-only button. Children and other icons are ignored.

<Button iconOnly="star">Icon left</Button>

iconRight

iconRight?: Icons | IconProps | React.ReactNode;

Icon to be displayed on the right side of the button.

Icon right

<Button iconRight="star">Icon right</Button>

intent

intent?:
  | "primary"
  | "secondary"
  | "secondaryColor"
  | "outline"
  | "tertiary"
  | "listItem";

The intent prop is used to style the button based on its purpose. Defaults to secondary.

<Button intent="primary">Primary</Button>
<Button intent="secondary">Secondary</Button>
<Button intent="secondaryColor">Secondary Color</Button>
<Button intent="outline">Outline</Button>
<Button intent="tertiary">Tertiary</Button>
<Button intent="listItem">List Item</Button>

isActive

isActive?: boolean;

isActive is a manual way of setting the "active" state of the button. The style is the same as its "active" (pressed) state.

This prop is useful in scenarios where you

<Button>Normal state</Button>
<Button isActive>Active state</Button>

isLoading

isLoading?: boolean;

Adds a loading spinner to the button. The button is disabled while loading. iconLeft and iconOnly icons are replaced with the loader.

<Button isLoading>Regular</Button>
<Button iconOnly="star" isLoading />
<Button iconLeft="star" iconRight="star" isLoading>
  With Icons
</Button>