button

name	button
description	Render a Neko Button — a prominent clickable element with variant, size, icon, and link. Use for primary calls-to-action like "Get started", "Download", "Open dashboard".

Button

Buttons are clickable elements used for primary actions or navigation. They share most attributes with Badge but render larger with a clearly clickable surface.

Syntax

[!button Button Text]
[!button variant="primary" text="Click Me"](url)
[!button icon="rocket" iconAlign="right" text="Send"](url)
[!button size="l" corners="pill" text="Large pill"](url)
[!button icon=":rocket:" text="Launch"](#anchor)

Attributes

Attribute	Values	Notes
text	string	Implicit when written as [!button Text].
variant	base, primary (default), secondary, success, danger, warning, info, light, dark, ghost, contrast	Colour scheme.
size	xs, s, m, l, xl, 2xl, 3xl	Default m.
corners	round (default), square, pill	Corner radius.
icon	UIcon name, :emoji:, <svg>, or image path	Optional icon.
iconAlign	left (default), right	Icon position.
target	blank, self, parent, top	Link target.

Examples

[!button variant="success" text="Install" icon="download"](#install)

[!button variant="primary" size="l" corners="pill" text="Get started"](getting-started.md)

[!button variant="ghost" icon="brands-github" text="GitHub" target="blank"](https://github.com/curiosity-ai/neko)

When to use Button vs Badge vs Ref

• Button — primary call-to-action, deserves attention.
• Badge — inline label (status, tag, version marker).
• Ref — card-style reference link, more visible than a regular hyperlink but less prominent than a button.