Buttons
Overview
This page is an example on how to document your button components.
Find the code for this page in the src/pages/components/buttons/index.astro file.
Copied !
---
import Button from "$components/button/Button.astro";
import PrimaryButton from "$components/button/primary/PrimaryButton.astro";
import SecondaryButton from "$components/button/secondary/SecondaryButton.astro";
import SuccessButton from "$components/button/success/SuccessButton.astro";
import WarningButton from "$components/button/warning/WarningButton.astro";
---
<Button>With Slot</Button>
<Button text="With text props" />
<Button text="Disabled" disabled />
<PrimaryButton>Rounded</PrimaryButton>
<Button borderRadius="square" text="Square" />
<SuccessButton borderRadius="arc" text="With Arc borderRadius" />
<SecondaryButton borderRadius="curve" text="Curve" />
<Button variant="outlined" text="Base button outlined" />
<Button variant="inversed" text="Base button inversed" />
<Button class="bg-slate-300 text-slate-800 p-4" borderRadius="pill">
Pill borderRadius with custom class
</Button>
<WarningButton borderRadius="circle" text="Circle" />
Alpine interop
We can use alpine properties such as @click or x:on-click.
Copied !
---
import Button from "$components/button/Button.astro";
---
<Button @click="console.log('clicked')" text="Click Me" />
Primary button
We use the primary button for main actions like saving a form or creating a new item.
Copied !
---
import PrimaryButton from "$components/button/primary/PrimaryButton.astro";
---
<PrimaryButton text="Primary Button" />
<PrimaryButton variant="outlined" text="Primary Outlined" />
<PrimaryButton variant="inversed" text="Primary Inversed" />
Secondary button
Secondary buttons accompany primary buttons to provide additional actions. For example, cancel buttons are secondary buttons.
Copied !
---
import SecondaryButton from "$components/button/secondary/SecondaryButton.astro";
---
<SecondaryButton text="Secondary Button" />
<SecondaryButton variant="outlined" text="Secondary Outlined" />
<SecondaryButton variant="inversed" text="Secondary Inversed" />
Success button
Success buttons give positive attempt to actions.
Copied !
---
import SuccessButton from "$components/button/success/SuccessButton.astro";
---
<SuccessButton text="Success Button" />
<SuccessButton variant="outlined" text="Success Outlined" />
<SuccessButton variant="inversed" text="Success Inversed" />
Danger button
Danger buttons are useful to prevent/cancel actions.
Copied !
---
import DangerButton from "$components/button/danger/DangerButton.astro";
---
<DangerButton text="Danger Button" />
<DangerButton variant="outlined" text="Danger Outlined" />
<DangerButton variant="inversed" text="Danger Inversed" />
Info button
Info buttons are mostly used for informative actions.
Copied !
---
import InfoButton from "$components/button/info/InfoButton.astro";
---
<InfoButton text="Info Button" />
<InfoButton variant="outlined" text="Info Outlined" />
<InfoButton variant="inversed" text="Info Inversed" />
Warning button
Warning buttons are often used for risky actions.
Copied !
---
import WarningButton from "$components/button/warning/WarningButton.astro";
---
<WarningButton text="Warning Button" />
<WarningButton variant="outlined" text="Warning Outlined" />
<WarningButton variant="inversed" text="Warning Inversed" />