The Button component is a versatile and interactive element for triggering actions in your application.
It supports multiple variants, colors, sizes, and can include icons, loading indicators, or render as a link.
Use it to create consistent, accessible, and visually appealing buttons across your UI.

Variant

Use the variant prop to change the visual style of the button (text, contained, outlined).

Preview

containedoutlinedtext

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Button } from "@fefade-ui/svelte"
</script>

<div
  style="
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  "
>
  {#each Constants.variants as variant (variant)}
    <Button {variant}>{variant}</Button>
  {/each}
</div>

Color

Use the class or style prop to change the color of the button, including background and text color.

Preview

successwarningerrorinfo aqua

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Button } from "@fefade-ui/svelte"
</script>

<div style="display:flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;">
  {#each Constants.statusColors as color (color)}
    <Button class="bg-{color} text-on-{color}">
      {color}
    </Button>
  {/each}
  <Button style="background: aqua;">aqua</Button>
</div>

Size

Use the size prop to adjust the button’s size for different contexts, such as form actions or toolbars.

Preview

xssmmdlgxl

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Button } from "@fefade-ui/svelte"
</script>

<div style="display:flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;">
  {#each Constants.sizes as size (size)}
    <Button {size}>{size}</Button>
  {/each}
</div>

Loading

Pass the isLoading prop to show a spinner or loading indicator inside the button. Ideal for async actions.

Preview

Code

<script lang="ts">
  import { Button } from "@fefade-ui/svelte"
</script>

<Button isLoading disabled></Button>
<Button isLoading></Button>

Icon

Include an icon inside the button for actions like “submit”, “delete”, or “download”.

Preview

heart

Code

<script lang="ts">
  import { Button } from "@fefade-ui/svelte"
</script>

<Button>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="16px"
    viewBox="0 -960 960 960"
    width="16px"
    fill="red"
  >
    <path
      d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Z"
    />
  </svg>
  heart
</Button>

Link

Render a button as a link using the href prop. Use target to control link behavior (e.g., _blank).

Preview

Link

Code

<script lang="ts">
  import { Button } from "@fefade-ui/svelte"
</script>

<Button href="/">Link</Button>

Disabled

Disable the button to prevent interactions using the disabled prop.

Preview

Disabled

Code

<script lang="ts">
  import { Button } from "@fefade-ui/svelte"
</script>

<Button disabled>Disabled</Button>

Pressed effect

The press effect provides visual feedback when clicking the button.
Use pressedEffect to disable this animation if desired.

Preview

No pressed effect Pressed effect

Code

<script lang="ts">
  import { Button } from "@fefade-ui/svelte"
</script>

<Button pressedEffect={false}>No pressed effect</Button>
<Button>Pressed effect</Button>

Props

Prop	Type	Default	Description
variant	string	"default"	Changes the visual style of the button (e.g., text, contained, outlined).
size	string	"md"	Adjusts the button size (sm, md, lg).
class	string	""	Custom classes for colors, borders, or other styles.
isLoading	boolean	false	Shows a loading spinner when true.
disabled	boolean	false	Disables the button, preventing user interaction.
pressedEffect	boolean	true	Enables or disables the press effect animation.
href	string	""	Renders the button as a link if provided.
target	string	"_self"	Target attribute for link buttons.
icon	slot	Optional	Include an icon inside the button.

Best Practices

• Use variants consistently across your app for clarity.
• Always provide loading states for async actions.
• Combine icons and text for better accessibility and UX.
• Ensure contrast and color accessibility for visibility.
• Prefer using href for navigation actions to keep semantic HTML.