Button

Buttons are buttons. You know what they're for. But LiftKit buttons are the most buttony buttons. They provide optical corrections to icon spacing with convenient utility props for micro adjustments.

Example Instance

<Button
  label="Both Icons"
  variant={variant}
  size={size}
  color="primary"
  startIcon="airplay"
  endIcon="airplay"
/>

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add button` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Props

Unique

Props unique to this component.

Name	Required	Type	Description	Default Val
color	no	LkColorWithOnToken	Controls the button color	“primary”
endIcon	no	IconName	Sets the icon on the right
label	no	string	Renders as the button text	“md”
material	no	string	Controls the material constructing the button. If blank, no material is used and it will resemble flat design	undefined
modifiers	no	string	Additional class names to concatenate onto the button’s default class list.	undefined
opticIconShift	no	boolean	If true, pulls the icon slightly upward.	true
size	no	"sm" \| "md" \| "lg”	Controls size of the button	“md”
startIcon	no	IconName	Sets the icon on the left
stateLayerOverride	no	LkStateLayerProps	Optional override for state layer properties, allowing customization of state layer behavior.	undefined
variant	no	"fill" \| "outline" \| "text”	Changes the style of the button	“fill”

Common

Props with globally-defined behavior that are used in multiple components.

Common Props	Status
{children}	Supported
Native HTML attributes	Supported