Button example

Displays a button.

How to use this button

Props

Variant attribute: This attribute defines the visual style of the button. Here are the different variants and their characteristics:

• default: This is often the most prominent and visually distinct button, typically used for the main action the user should take.
• secondary: This button has a less prominent visual style compared to the primary button, often used for secondary actions or alternative options.
• destructive: This button usually has a red color and conveys a destructive action, like deleting or canceling something. Use it with caution to avoid accidental actions.
• outline: This button has a border around the text instead of a filled background, providing a lighter and less visually dominant element.
• ghost: This button has minimal styling, often with only text and a subtle hover effect, making it appear transparent on the page.
• link: This button resembles a text link, typically underlined and changing color on hover. It's suitable for actions that navigate to another page or trigger an external link.

Playground

Import from filigran-ui :

Import {Button} from 'filigran-ui'

          <div className={tw(`flex gap-2`)}>
            <Button> Primary/Default </Button>
            <Button variant="secondary"> Secondary </Button>
            <Button variant="destructive"> Destructive </Button>
            <Button variant="outline"> Outline </Button>
            <Button variant="ghost"> Ghost </Button>
            <Button variant="link"> Link </Button>
          </div>