Buttons

A flexible and customizable button component for various actions.

Default Button

<mijnui:button color="primary">Default</mijnui:button>

Button with Variants

<mijnui:button variant="outline" color="success">Outline</mijnui:button>
<mijnui:button variant="subtle" color="success">Subtle</mijnui:button>
<mijnui:button variant="ghost" color="success">Ghost</mijnui:button>

Button with Color Variants

<mijnui:button>Default</mijnui:button>
<mijnui:button color="primary">Primary</mijnui:button>
<mijnui:button color="secondary">Secondary</mijnui:button>
<mijnui:button color="success">Success</mijnui:button>
<mijnui:button color="info">Info</mijnui:button>
<mijnui:button color="warning">Warning</mijnui:button>
<mijnui:button color="danger">Danger</mijnui:button>

Button Sizes

<mijnui:button size="xs">Extra Small</mijnui:button>
<mijnui:button size="sm">Small</mijnui:button>
<mijnui:button size="md">Default</mijnui:button>
<mijnui:button size="lg">Large</mijnui:button>

Button Radius

<mijnui:button rounded="sm">rounded-sm</mijnui:button>
<mijnui:button rounded="md">rounded-md</mijnui:button>
<mijnui:button rounded="lg">rounded-lg</mijnui:button>
<mijnui:button rounded="full">rounded-full</mijnui:button>

Icon Buttons Sizes

<mijnui:button size="icon-xs">
    <mijnui:icon name="fa-solid fa-shield-halved" />
</mijnui:button>
<mijnui:button size="icon-sm">
    <mijnui:icon name="fa-solid fa-shield-halved" />
</mijnui:button>
<mijnui:button size="icon-md">
    <mijnui:icon name="fa-solid fa-shield-halved" />
</mijnui:button>
<mijnui:button size="icon-lg">
    <mijnui:icon name="fa-solid fa-shield-halved" />
</mijnui:button>

On this page