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="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
    </Button>

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

    <Button tertiary href="#" small class="px-5">
        Read more
        <Icon name="flowbite:arrow-right-outline" 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>

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>