Button example

Displays a button.

How to use this button

Props

Name	Type	Default	Description
variant	enum ("default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link" \| "outline-primary" \| "outline-destructive" \| "outline-secondary")	default	This attribute defines the visual style of the button. Here are the different variants and their characteristics
size	enum ("default" \| "sm" \| "lg" \| "icon" \| "icon-rounded")	default	This attribute defines the visual style of the button. Here are the different variants and their characteristics

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.
{mainvariant}{alternate_color}: Is just a mix of two variants, for example being outline with secondary color will be outline-secondary

Playground

Import from @filigran/ui :

Import {Button} from '@filigran/ui'


  <div className={'flex gap-2'}>
      <div className="flex flex-col gap-s items-center">
        <Button> Primary-default </Button>
        <Button size="sm"> Primary-default sm </Button>
        <Button variant="secondary"> Secondary-default </Button>
        <Button variant="tertiary"> Tertiary </Button>
        <Button variant="link-primary"> Link </Button>
        <Button size="icon"><AddIcon className="size-4" /></Button>
        <Button size="icon" variant="secondary"><AddIcon className="size-4" /></Button>
        <Button size="icon-rounded"><AddIcon className="size-4" /></Button>
        For retro compatibility, we keep old variants
        <Button variant="ghost">Ghost </Button>
                  <Button variant="outline">Outline </Button>
      </div>
      <div className="flex flex-col gap-s items-center">
        <Button variant="destructive"> Destructive </Button>
        <Button variant="destructive" size="sm"> Destructive sm</Button>
        <Button variant="secondary-destructive"> secondary-destructive </Button>
        <Button variant="tertiary-destructive"> Tertiary destructive </Button>
        <Button variant="link-destructive"> Link </Button>
        <Button variant="destructive" size="icon"><AddIcon className="size-4" /></Button>
        <Button variant="destructive" size="icon-rounded"><AddIcon className="size-4" /></Button>
      </div>

    </div>