Buttons

Button lets you define a link button.

Usage

You can add button in following way:

{{<button title="Get Started" href="/getting-started" >}}

Available Properties

type: Type of the button. It can be icon-only, text-only, or icon-text. The default is text-only .
title: Title of the button in case the type is text-only or icon-text.
icon: The name of the icon in case the type is icon-only or icon-text.
size: The size of the button. It can be small, medium or large. The default is medium.
variant: The button variant. It can be outline, ghost, or destructive.
href: The URL where this button links to. Default is #.
class: Pass one or more Tailwind CSS class.

Examples

Icon Only Button

{{< button type="icon-only" icon="file-text">}}

Text Only Button

Resume

{{< button type="text-only" text="Resume">}}

Icon Text Button

Resume

{{< button type="icon-text" icon="file-text" text="Resume">}}

Outline Button

Resume

{{< button type="icon-text" icon="file-text" text="Resume" variant="outline" >}}

Ghost Button

Resume

{{< button type="icon-text" icon="file-text" text="Resume" variant="ghost" >}}

Destructive Button

Resume

{{< button type="icon-text" icon="file-text" text="Resume" variant="destructive" >}}

Button Sizes

Small

Resume Resume

{{<list>}}
  {{< button type="icon-only" icon="file-text" size="small">}}
  {{< button type="text-only" text="Resume" size="small" >}}
  {{< button type="icon-text" icon="file-text" text="Resume" size="small" >}}
{{</list>}}

Medium (default)

Resume Resume

{{<list>}}
  {{< button type="icon-only" icon="file-text" size="medium" >}}
  {{< button type="text-only" text="Resume" size="medium" >}}
  {{< button type="icon-text" icon="file-text" text="Resume" size="medium" >}}
{{</list>}}

You can omit the size parameter

Large

Resume Resume

{{<list>}}
  {{< button type="icon-only" icon="file-text" size="large" >}}
  {{< button type="text-only" text="Resume" size="large" >}}
  {{< button type="icon-text" icon="file-text" text="Resume" size="large" >}}
{{</list>}}

Using Custom Class

Button With Class

{{< button text="Button With Class" class="w-full bg-teal-700 hover:bg-teal-600">}}