Button

The Button component is a flexible and customizable element designed to meet various needs. It supports multiple sizes, styles, and types, making it suitable for diverse use cases. You can use it as a standard button or as a link, depending on your requirements. The component allows for additional customization through props, enabling you to style and animate it to match your application's theme.

The Button component offers beforeLabel and afterLabel snippet blocks that let you add custom content before or after the button’s label. This is useful for icons, badges, or other elements, giving you more control over the button’s look and behavior. Although you can add elements manually with HTML and CSS, using these snippets keeps the structure cleaner and easier to maintain. It also simplifies layout and styling.

For better structure, flexibility, and consistency, beforeLabel and afterLabel are great options.

<Button>
  {#snippet beforeLabel()}
    <Svg size={1.5}>
      <path d="M8 8a3 3 0 ... />
    </Svg>
  {/snippet}

  Button Text

  {#snippet afterLabel()}
    <Svg size={1.5}>
      <path fill-rule="evenodd" d="M1 8a.5.5 0 0 ... />
    </Svg>
  {/snippet}
</Button>

<Button>
  <div class="CUSTOM CLASSES">
    <Svg size={1.5}>
      <path d="M8 8a3 3 0 ... />
    </Svg>

    Button Text

    <Svg size={1.5}>
      <path fill-rule="evenodd" d="M1 8a.5.5 0 0 ... />
    </Svg>
  </div>
</Button>

<Button color="brand">Brand</Button>
<Button color="error">Error</Button>
<Button color="info">Info</Button>
<Button color="success">Success</Button>
<Button color="warning">Warning</Button>

Each color serves a purpose, making design intuitive and user-friendly. While you can customize colors with the class attribute, the color prop offers a quick and consistent solution.

The theme prop controls the button’s overall style and background. It supports three values: 'default', 'soft', and 'gradient'. The default theme gives the standard button look, the soft theme uses softer colors, and the gradient theme adds a vibrant background with gradient styling.

<Button theme="soft" color="brand">Brand</Button>
<Button theme="soft" color="error">Error</Button>
<Button theme="soft" color="info">Info</Button>
<Button theme="soft" color="success">Success</Button>
<Button theme="soft" color="warning">Warning</Button>

<Button theme="gradient" gradientColor="brand">Brand</Button>
<Button theme="gradient" gradientColor="error">Error</Button>
<Button theme="gradient" gradientColor="info">Info</Button>
<Button theme="gradient" gradientColor="success">Success</Button>
<Button theme="gradient" gradientColor="warning">Warning</Button>

The outline prop lets you create a button with a modern outline style. It gives the button a transparent background and a border, making it great for secondary actions or a minimalist look.

<Button color="brand" outline={true}>Brand</Button>
<Button color="error" outline={true}>Error</Button>
<Button color="info" outline={true}>Info</Button>
<Button color="success" outline={true}>Success</Button>
<Button color="warning" outline={true}>Warning</Button>

The size prop allows you to adjust the button's size to fit various design needs. This prop supports a range of predefined sizes, ensuring consistency and flexibility across your UI components.

<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra large</Button>
<Button size="auto">Auto</Button>

Each size option adjusts the button's padding and font size, providing a cohesive look across different screen sizes and use cases. The auto size adapts to the content, has no padding, making it flexible for various layouts.

<Button square={true}>m</Button>

<Button square={true} size="xs"> ... </Button>
<Button square={true} size="sm"> ... </Button>
<Button square={true} size="md"> ... </Button>
<Button square={true} size="lg"> ... </Button>
<Button square={true} size="xl"> ... </Button>

This feature ensures that your square buttons can fit seamlessly into different parts of your design, from small icons to larger clickable elements.

<Button rounded="none">None</Button>
<Button rounded="sm">Small</Button>
<Button rounded="md">Medium</Button>
<Button rounded="lg">Large</Button>
<Button rounded="xl">Extra large</Button>
<Button rounded="full">Full</Button>

Using the rounded prop ensures your buttons adhere to a consistent design pattern, enhancing the visual coherence of your UI.

<Button animationSpeed="slower">Slower animation</Button>
<Button animationSpeed="slow">Slow animation</Button>
<Button animationSpeed="normal">Normal animation</Button>
<Button animationSpeed="fast">Fast animation</Button>
<Button animationSpeed="faster">Faster animation</Button>
<Button animationSpeed="none">No Animation animation</Button>

Each value adjusts the animation timing to fit your design needs, ensuring a seamless user experience.