Buttons & actions
Buttons trigger actions or link out; copy buttons put text on the clipboard in one click.
Button
Variant: brand
%%%brand
Brand
%%%
Variant: success
%%%success
Success
%%%
Variant: neutral
%%%neutral
Neutral
%%%
Variant: warning
%%%warning
Warning
%%%
Variant: danger
%%%danger
Danger
%%%
Appearance: accent
%%%brand accent
accent
%%%
Appearance: filled
%%%brand filled
filled
%%%
Appearance: outlined
%%%brand outlined
outlined
%%%
Appearance: filled-outlined
%%%brand filled-outlined
filled-outlined
%%%
Appearance: plain
%%%brand plain
plain
%%%
Size: xs
%%%neutral xs
Size xs
%%%
Size: s
%%%neutral s
Size s
%%%
Size: m
%%%neutral m
Size m
%%%
Size: l
%%%neutral l
Size l
%%%
Size: xl
%%%neutral xl
Size xl
%%%
Pill
%%%brand pill
Pill button
%%%
Caret
%%%neutral caret
Menu
%%%
Loading
%%%brand loading
Saving…
%%%
Disabled
%%%neutral disabled
Unavailable
%%%
Start + end icons
Use icon:name (or icon:start:name) and icon:end:name to place icons on either side of the label.
%%%brand icon:start:gear icon:end:arrow-right
Settings
%%%
Link button
A markdown link inside the button turns it into an <a>; plain text makes a non-link <button>.
%%%brand icon:download
[Download the kit](https://example.com/file.zip)
%%%
Copy button
Basic
Click the icon to copy the text to the clipboard.
<<<
npm install markawesome
<<<
Tooltip placement: top
<<<top
gem install markawesome
<<<
Tooltip placement: right
<<<right
gem install markawesome
<<<
Tooltip placement: bottom
<<<bottom
gem install markawesome
<<<
Tooltip placement: left
<<<left
gem install markawesome
<<<
Tooltip mode: copy
Modes: full (default), copy (feedback only), none (no tooltip).
<<<tooltip:copy
yarn add markawesome-js
<<<
Custom labels
<<<copy-label="Copy command" success-label="Copied!"
pnpm add markawesome-js
<<<
Disabled
<<<disabled
Cannot copy this
<<<