Button

Medium Button Primary

---
import { Button } from "wf-components";
---

<Button iconName="arrow-up-right" text='Medium Button Primary' />

Props

variant

Optional Defaults to primary, the options are: primary, secondary, link, and dropdown.

Button Primary Button Secondary Button Link Dropdown Button Primary

---
import { Button } from "wf-components";
---

<Button variant="primary" iconName="arrow-up-right" text='Button Primary' />
<Button variant="secondary" iconName="arrow-up-right" text='Button Secondary' />
<Button variant="link" iconName="arrow-up-right" text='Button Link' />
<Button dropdown iconName="chevron-down" text='Dropdown Button Primary' />

size

Optional The size of the card, defaults to md and the options are sm, md, and lg.

Button Small Button Medium Button Large

---
import { Button } from "wf-components";
---
<Button size="sm" iconName="arrow-up-right" text='Button Small' />
<Button size="md" iconName="arrow-up-right" text='Button Medium' />
<Button size="lg" iconName="arrow-up-right" text='Button Large' />

disabled

Optional If the button is disabled, it will not be clickable.

Button Primary Button Secondary Button Link Dropdown Button Primary

---
import { Button } from "wf-components";
---

<Button disabled variant="primary" iconName="arrow-up-right" text='Button Primary' />
<Button disabled variant="secondary" iconName="arrow-up-right" text='Button Secondary' />
<Button disabled variant="link" iconName="arrow-up-right" text='Button Link' />
<Button disabled dropdown iconName="chevron-down" text='Dropdown Button Primary' />

iconName

Optional If you’d like an icon to be displayed on the right side of the button, you can pass the icon name here.

text

Optional The text that will be displayed in the button.

href

Optional The button link.

dropdown

Optional If you’d like for the button to be a dropdown, you can pass true here.