Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Navigation

LinkLink Button

Link Button

Link buttons allow users to navigate to a different page.

#

#

Use this variant for call-to-action buttons on the page that the user is expected to perform next.

There should be no more than three primary buttons on the page at once. Avoid placing two primary buttons near each other.

#

Use this variant for all buttons that don't qualify for primary or warning variants.

This is a default variant, so you don't have to explicitly specify it via variant prop.

#

Use this variant for linking to a page that contains a dangerous or destructive action.

#

Disabled button indicates that user may navigate to a certain page, but it is not available currently.

When button is disabled, use a tooltip to explain why user is not allowed to go to the next page or what do they have to do to enable it.

#

When a button is justified, it takes up the entire available container width. By default, a button size depends on length of a label inside a button.

#

Icons can be used in buttons when additional clarity is required and the icon is highly relevant to the action. Icons should not be used for decoration.

If icon indicates a direction, use directionIcon prop, which places the icon on the right side of a button.

#

Buttons can also display an image instead of an icon.

#

Use a ButtonGroup component when you need to show two or more buttons nearby.

#

Primary

Secondary

Warning

Initial

Click
Click
Click

Disabled

#

#

  • As a call-to-action to navigate to a different page, with a purpose of creating or modifying some resource.

#

  • If you're navigating to an external URL that's not part of the current app, use a link instead.

#

#

  • Only use icons from Heroicons.
  • Don't override icon size.
  • Prefer outline icons over solid ones.

#

  • Use a justified button only inside a container with defined bounds, like a card or a dialog.

#

#

NameDefaultDescription
isDisabledfalseboolean

Toggles the disabled state.

isJustifiedfalseboolean

Take up an entire available container width.

href

string

Link URL.

children

ReactNode

Button text.

variant"secondary""primary" | "secondary" | "warning"

Button variant, which determines the purpose the button is used for and its appearance.

icon

ComponentType<SVGAttributes<SVGElement>>

Primary icon that's displayed on the left. Only `icon` or `imageUrl` can be set at the same time.

directionIcon

ComponentType<SVGAttributes<SVGElement>>

Icon for indicating the direction, displayed on the right side of the button. Used for icons like "arrow right" or "caret down".

imageUrl

string

URL to an image to display on the left. Only `icon` or `imageUrl` can be set at the same time.

On this page

  • Usage
  • Primary
  • Secondary
  • Warning
  • Disabled
  • Justified
  • Icons
  • Images
  • Button groups
  • Combinations
  • Guidelines
  • When to use
  • When not to use
  • Content
  • Icons
  • Sizes
  • Props
  • LinkButton