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 provides beforeLabel and afterLabel snippet blocks, allowing you to add custom content before and after the button's label. This structure is especially useful for adding icons, badges, or any other elements, giving you more control over the button's appearance and behavior.

While you can manually add custom elements directly inside the Button element using standard HTML and CSS, the snippet approach ensures a cleaner and more maintainable structure. It also simplifies the integration of custom elements, reducing the need for additional styling and layout adjustments.

For cleaner structure, flexibility and consistency the beforeLabel and afterLabel snippet blocks are perfect for you.

<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 determines the overall style and background of the button. It accepts three values: 'default', 'light', and 'gradient'. The default theme applies the standard button styles, while the light theme uses lighter versions of the default colors for a softer look. The gradient theme gives a more vibrant feel by applying gradient backgrounds to the button.

<Button theme="light" color="brand">Brand</Button>
<Button theme="light" color="error">Error</Button>
<Button theme="light" color="info">Info</Button>
<Button theme="light" color="success">Success</Button>
<Button theme="light" 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 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>
<Button rounded="none">None</Button>

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