Buttons
Solid, outline, and ghost button variants with hover states, sizes, and disabled styles.
Solid Buttons
Default filled buttons for primary actions.
<button class="n-btn n-btn-primary">Primary</button>
<button class="n-btn n-btn-success">Success</button>
<button class="n-btn n-btn-danger">Danger</button>
Outline Buttons
Bordered buttons that fill on hover — great for secondary actions.
<button class="n-btn n-btn-outline-primary">Primary</button>
<button class="n-btn n-btn-outline-danger">Danger</button>
Ghost Button
Minimal button with no background — reveals a subtle tint on hover.
<button class="n-btn n-btn-ghost">Ghost Button</button>
Button Sizes
Three sizes for different contexts.
<button class="n-btn n-btn-primary n-btn-sm">Small</button>
<button class="n-btn n-btn-primary">Default</button>
<button class="n-btn n-btn-primary n-btn-lg">Large</button>
Disabled State
Use the native disabled attribute on buttons. For custom controls, pair aria-disabled="true" with application logic that blocks keyboard activation.
<button class="n-btn n-btn-primary" disabled>Disabled</button>
<a class="n-btn n-btn-secondary n-is-disabled" aria-disabled="true">Unavailable</a>
Buttons as Links
Apply button classes to <a> tags for link-styled buttons.
<a href="/page" class="n-btn n-btn-primary">Link Button</a>
Button Groups
Combine buttons with flex utilities for grouped controls.
Full Width
Add .n-w-full to make a button span the entire width.