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 need to manually set the active state of the button, such as when the button is a dropdown trigger and the dropdown is open.

Normal state Active state

<div className="flex gap-2">
  <Button>Normal state</Button>
  <Button isActive>Active state</Button>
</div>

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>