Button

The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.

Default Button

Simple button with different styles and sizes.

import { Button } from "@superui/styles";

<Button variant="primary" onClick={() => alert("Hello World!")}>
  Primary Button
</Button>;

Button with Icon

Button with an icon.

import { Button } from "@superui/styles";

<Button
  variant="primary"
  onClick={() => alert("Hello World!")}
  icon={<ArrowIcon />}
  iconPosition="left"
>
  Primary Button
</Button>;

Custom Tailwind Button

You can add custom classes to the button and it will override the default styles.

import { Button } from "@superui/styles";

<Button
  variant="primary"
  onClick={() => alert("Hello World!")}
  className="bg-transparent border border-white hover:bg-white text-white hover:text-black"
>
  Custom Button
</Button>;

Props

This component has all the props infered from the HTML Button element, you can check all the props here MDN.

It also has the following props:

Name	Type	Default	Description
variant	String	primary	Select variant colors of the input.
className	String	-	Extra class names for the input. Overwrites colliding classes.