All buttons

This page is an example on how to document your button components, most of the copy was written by AI so don’t take it very seriously.

Find the code for this page in the src/pages/components/buttons.md file.

<Button primary>Primary</Button>
<Button secondary>Secondary</Button>
<Button tertiary>Tertiary</Button>
<Button text medium>Text</Button>
<Button tag small>Tag Name</Button>

<Button primary rounded>Primary</Button>
<Button secondary rounded>Secondary</Button>
<Button tertiary rounded>Tertiary</Button>
<Button text medium rounded>Text</Button>
<Button tag small rounded>Tag Name</Button>

Primary button <button>

We use the primary button for main actions like saving a form or creating a new item.

    <Button primary>Primary</Button>
    <Button primary medium>Primary</Button>
    <Button primary small>Primary</Button>

Secondary button

Secondary buttons accompany primary buttons to provide additional actions. For example, cancel buttons are secondary buttons.

    <Button secondary>Secondary</Button>
    <Button secondary medium>Secondary</Button>
    <Button secondary small>Secondary</Button>

Text button

Text buttons are used for actions that do not require a primary or secondary button.

<Button text>Text button</Button>

Link tertiary

    <Button tertiary>Tertiary</Button>
    <Button tertiary medium>Tertiary</Button>
    <Button tertiary small>Tertiary</Button>

Tertiary with icon

    <Button tertiary href="#">
        Read more
        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
    </Button>

    <Button tertiary href="#" medium>
        Read more
        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
    </Button>

    <Button tertiary href="#" small class="px-5">
        Read more
        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
    </Button>

Rounded button

Rounded edges

<Button primary rounded>Primary</Button>
<Button secondary rounded>Secondary</Button>
<Button tertiary rounded>Tertiary</Button>
<Button text medium rounded>Text</Button>
<Button tag small rounded>Tag Name</Button>

<Button primary medium rounded>Primary</Button>
<Button secondary medium rounded>Secondary</Button>
<Button tertiary medium rounded>Tertiary</Button>
<Button text medium medium rounded>Text</Button>
<Button tag small medium rounded>Tag Name</Button>

<Button primary small rounded>Primary</Button>
<Button secondary small rounded>Secondary</Button>
<Button tertiary small rounded>Tertiary</Button>
<Button text medium small rounded>Text</Button>
<Button tag small rounded>Tag Name</Button>

Outline button

Text buttons are used for actions that do not require a primary or secondary button.

    <Button primary-outline title="Title">Text button</Button>
    <Button primary-outline rounded title="Title">Text button</Button>

    <Button secondary-outline title="Title">Text button</Button>
    <Button secondary-outline rounded title="Title">Text button</Button>

    <Button tertiary-outline title="Title">Text button</Button>
    <Button tertiary-outline rounded title="Title">Text button</Button>

    <Button tertiary-outline title="Title" class="border-2">Text button</Button>

Outline button - custom hover

    <Button tertiary-outline rounded light-hover title="Title">Text button</Button>
    <Button tertiary-outline rounded medium-hover title="Title">Text button</Button>
    <Button tertiary-outline rounded dark-hover title="Title">Text button</Button>
    <Button tertiary-outline rounded white-hover title="Title">Text button</Button>
    

Link button <a>

Text buttons are used for actions that do not require a primary or secondary button.

<Button primary href="#" title="Title">Text button</Button>

Circle button

Circle buttons are perfect for icon-only actions, maintaining equal width and height.

<Button primary circle>
    <Icon name="la:arrow-right" />
</Button>
<Button secondary circle>
    <Icon name="la:arrow-right" />
</Button>
<Button tertiary circle>
    <Icon name="la:arrow-right" />
</Button>

<Button primary medium circle>
    <Icon name="la:arrow-right" class="text-xl" />
</Button>
<Button secondary medium circle>
    <Icon name="la:arrow-right" class="text-xl" />
</Button>
<Button tertiary medium circle>
    <Icon name="la:arrow-right" class="text-xl" />
</Button>



<Button primary small circle>
    <Icon name="la:arrow-right" class="text-lg" />
</Button>
<Button secondary small circle>
    <Icon name="la:arrow-right" class="text-lg" />
</Button>
<Button tertiary small circle>
    <Icon name="la:arrow-right" class="text-lg" />
</Button>

Circle outline buttons

Circle buttons are also available in outline variants.

    <Button primary-outline circle>
        <Icon name="la:arrow-right" class="text-2xl" />
    </Button>
    <Button secondary-outline circle>
        <Icon name="la:arrow-right" class="text-2xl" />
    </Button>
    <Button tertiary-outline circle>
        <Icon name="la:arrow-right" class="text-2xl" />
    </Button>