Buttons

A flexible and customizable button component for various actions.

Default Button

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

Button with Various

<mijnui:button outline>Outline</mijnui:button>

<mijnui:button subtle>Subtle</mijnui:button>

<mijnui:button ghost>Ghost</mijnui:button>

Button with Color Variants

<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">Small</mijnui:button>

<mijnui:button rounded="md">Default</mijnui:button>

<mijnui:button rounded="lg">Large</mijnui:button>

<mijnui:button rounded="full">Full</mijnui:button>

Icon Buttons Sizes

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

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

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

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

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

Previous

Breadcrumb

Next

Cards

On this page