Vue Notus Buttons

Use Notus’s buttons for Tailwind CSS and custom styles for actions in forms, dialogues, and more with support for multiple sizes, states, and more.


Filled

Only Text

Choose this basic button, only with text.

Icon and Text

Or, you can go with an icon alongside your text.

Just Icon

Icons are enough so your users will know what the button does.

Round with text

Choose to go with a basic more rounded button.

Round with icon and text

Or, you can go with an icon alongside your text in the rounded button.

Round with icons

Icons are enough so your users will know what the rounded button does.

Outline

Only Text

Choose this basic button, only with text.

Icon and Text

Or, you can go with an icon alongside your text.

Just Icon

Icons are enough so your users will know what the button does.

Round with text

Choose to go with a basic more rounded button.

Round with icon and text

Or, you can go with an icon alongside your text in the rounded button.

Round with icons

Icons are enough so your users will know what the rounded button does.

The bellow examples are made with button tags, but you can feel free to change them with anchor (<a>) tags as well.

Small with text

Choose this basic link, only with text.

Small Icon and Text

Or, you can go with an icon alongside your text.

Small Icon

Icons are enough so your users will know what the link does.

Regular with text

Choose this basic link, only with text.

Regular Icon and Text

Or, you can go with an icon alongside your text.

Just Icon

Icons are enough so your users will know what the link does.

Large with text

Choose this basic link, only with text.

Large Icon and Text

Or, you can go with an icon alongside your text.

Just Icon

Icons are enough so your users will know what the link does.