Variants Sizes States Icons Interactive API

Variants

default Default primary Primary secondary Secondary danger Danger ghost Ghost link Link Style <button-fc>Default</button-fc> <button-fc variant="primary">Primary</button-fc> <button-fc variant="danger">Danger</button-fc>

Sizes

xs Extra Small sm Small md Medium lg Large <button-fc size="xs">Extra Small</button-fc> <button-fc size="sm">Small</button-fc> <button-fc size="md">Medium</button-fc> <button-fc size="lg">Large</button-fc>

States

disabled Disabled Primary Disabled loading Loading Primary Loading active Active <button-fc disabled>Disabled</button-fc> <button-fc loading>Loading</button-fc> <button-fc active>Active</button-fc>

With Icons

left icon ⚡ Action right icon Settings ⚙ icon only ✕ − + <button-fc><span>⚡</span> Action</button-fc> <button-fc>Settings <span>⚙</span></button-fc> <button-fc size="sm">✕</button-fc>

Interactive Tests

Click Me Clicks: 0 Toggle Loading Target Button

Attributes

Attribute	Values	Description
variant	default | primary | secondary | danger | ghost | link	Visual style
size	xs | sm | md | lg	Button size
disabled	boolean	Disables interaction
loading	boolean	Shows spinner
active	boolean	Selected state
data-invoke	string	Tauri command
data-args	JSON	Tauri args

Import

<link rel="stylesheet" href="button-fc.css"> <script type="module" src="button-fc.js"></script>