How do I create a button in Tailwind CSS with Nira UI?

Use the base .button class to create a default button in Nira UI. For example: Default Button . You can also use .button-outline, .button-soft, .button-ghost, and .button-link for different styles.

Does Nira UI support button states like loading and disabled?

Yes. Nira UI provides built-in support for button states such as .button-loading for loading animations and the disabled attribute to prevent interaction.

Can I use Nira UI buttons on anchor, button, and input elements?

Yes. The .button class can be applied to anchor links, elements, , and for full flexibility.

Open Sidebar

Tailwind CSS Button - Nira UI

Browse and customize beautiful Tailwind CSS buttons in various styles and states, from active to disabled, allowing users to take actions or make choices.

Default Button

Use the base .button class to create a default button.

Link Button






Link Button

The button class can be used on , <a> anchor links,<button> form buttons, <input type="submit"> submit inputs, <input type="reset"> reset inputs.

Anchor


Anchor

Button Colors

Nira UI buttons come with multiple color variants that fit any design system.

Button Sizes

Easily change the button size using Nira UI’s size modifiers.

Outline Buttons

Outline buttons use a bordered style instead of a solid background.

Soft Buttons

Soft buttons come with light background colors for subtle UI elements.

Ghost Buttons

Ghost buttons are minimalist transparent buttons with colored text.

Rounded Buttons

Nira UI also supports rounded and circular buttons.

Full-Width Buttons

Use .button-full to create full-width buttons that stretch across containers.

Loading Buttons

Show loading states with .button-loading.

Disabled

Easily create disabled buttons to prevent user interaction.

Theme

Button Group