https://framer.com/m/Button-xyMR.js
Button
A button triggers an action or navigates somewhere. Every example below is a live instance of the design system’s Button — appearance, type and radius all resolve from the project theme tokens, so the whole page follows light and dark mode.
Examples
Live specimens for every control the component exposes.
Default
The Button ships with a solid appearance at medium size. Only the label is required — everything else is opt-in.
Appearance
Five appearances share one geometry. Solid carries the primary action, Soft and Surface sit on layered panels, Outline needs a visible edge, and Ghost disappears into dense toolbars.
Solid
Soft
Outline
Ghost
Surface
Color
color picks which ramp a button is drawn from — the theme’s primary accent, the neutral secondary, or the semantic warning ramp. It composes with every appearance, so emphasis and hue stay independent.
color · primary
color · secondary
color · warning
Size
Size moves padding, glyph scale and the type step together. Keep one size per surface.
small
medium
large
Radius
Radius is a separate shape token, layered on top of the theme radius scale — from square to fully rounded.
none
small
medium
large
full
Icon placement
Set iconName to any Phosphor glyph in PascalCase. iconPosition puts it before or after the label.
iconPosition left
iconPosition right
on a soft button
Icon only
iconButton drops the label and renders the glyph in a square hit area. Reserve it for actions whose glyph is unambiguous.
search
add
delete
more
Glyph weight
Six Phosphor weights let a glyph match the density of the surface it sits on.
thin
light
regular
bold
fill
duotone
States
loading swaps the label for a spinner and blocks input. disabled drops the button to the disabled token. Hover and pressed come from the token layer, not from props.
default
loading
disabled
Tooltip
Every button can carry a tooltip. The object control holds the copy, the side it opens on, the delay, and an optional glyph — hover any button below to see it.
side top
side bottom
side right
Link button
Give a Button a link and it renders as an anchor instead of a button. newTab is for external destinations, smoothScroll for in-page targets.
internal page
external · new tab
in-page anchor
Alignment and width
align positions content inside a button that is wider than its label. Stretch a button to its container only when it is the single action in a narrow column.
align left
align center
align right
width stretched to the container
Props
The controls exposed on the instance panel, in the order you will reach for them.
Usage
Guidance carried over from the component definition.
Reach for Button
The control should read as a button, whether or not it navigates.
A glyph belongs beside the label, or in place of it.
An async action needs a visible loading state.
Clicks need a tracking id for analytics.
Reach for something else
Inline text links inside a paragraph.
Form submission handling — use a form submit button.
Menus and pickers — use DropdownMenuX or SelectX.
Multi-select chips — use TagPicker.
Io — UI Basics
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.