Button

Displays a button.

Component Code 
<april:button>Button</april:button>

Button Link

The examples below also work with the button link component, which just uses an a tag under the hood

Button
Component Code 
<april:button-link href="https://x.com/yungifez">Button</april:button-link>

Variant examples

The button component comes in multiple variants

Default

Component Code 
<april:button>Button</april:button>

Secondary

Component Code 
<april:button variant="secondary">Button</april:button>

Destructive

Component Code 
<april:button variant="destructive">Button</april:button>

Outline

Component Code 
<april:button variant="outline">Button</april:button>

Ghost

Component Code 
<april:button variant="ghost">Button</april:button>

Link

Component Code 
<april:button variant="link">Button</april:button>

You can also use the none variant and style the button yourself

Size examples

The button component comes in multiple sizes

Default

Component Code 
<april:button>Button</april:button>

Icon

Component Code 
<april:button size="icon" class="justify-center" variant="outline">
    <i class="fas fa-angle-right"></i>
</april:button>

Small

Component Code 
<april:button size="sm">Button</april:button>

Large

Component Code 
<april:button size="lg" variant="outline">
    <i class="far fa-envelope mr-2"></i>
    Login with Email
</april:button>