Button
A styled link button. Set the label, URL, style, color, size, border radius, and alignment. Can open links in the same tab or a new tab. Resizable via drag handles on the right and bottom edges.
Adding a button
/ → Button
Type
/button on any empty block and press Enter.Block palette
Click + on any block → Basic → Button.
Button styles
Three style variants
Get started
Learn more
Cancel
Filled
Solid background in the chosen color. Text color is automatically white or black based on the background luminance.
Outline
Transparent background with a colored border and text.
Ghost
No background and no border — just colored text. Best for secondary or tertiary actions.
Settings
| Setting | Options | Default |
|---|---|---|
| Label | Any text | Click me |
| URL | Any URL or relative path | — |
| Open in | Same tab, New tab | New tab |
| Style | Filled, Outline, Ghost | Filled |
| Color | 10 swatch presets (Black, White, Blue, Indigo, Purple, Pink, Red, Orange, Green, Teal) + custom picker | #000000 (Black) |
| Size | SM, MD, LG | MD |
| Radius | None, SM, MD, Full (pill) | Full |
| Align | Left, Center, Right | Left |
| Width | Auto or custom px (drag right handle) | Auto |
| Height | Auto or custom px (drag bottom handle) | Auto |
Resizing
Two drag handles appear on hover — one on the right edge (controls width) and one on the bottom edge (controls height). Drag to set a fixed pixel size.
There is no reset control for a custom width or height — once set by dragging, the only way back to auto sizing is to delete the button and re-add it.