Buttons represent all CTAs (call to action) on Buffy branded websites. This includes links to pages, products, collections and to ATCs (add to cart).
<Button color={"lightEucalyptus"} route={"https://buffy.co"}>Meet The Breeze</Button><Button color={"buffyOrange"} route={"https://buffy.co"}>Meet The Breeze</Button><Button color={"buffyPurple"} route={"https://buffy.co"}>Meet The Breeze</Button><Button color={"purple"} route={"https://buffy.co"}>Meet The Breeze</Button><Button color={"orange"}>Meet The Breeze</Button><Button color={"green"}>Meet The Breeze</Button><Button color={"blue"}>Meet The Breeze</Button><Button color={"yellow"}>Meet The Breeze</Button><Button color={"purple"} inactive={true}>Meet The Breeze</Button><Button color={"lightEucalyptus"} compact={true}>Buy Now</Button><Button color={"buffyOrange"} compact={true}>Buy Now</Button><Button color={"purple"} compact={true}>Buy Now</Button><Button color={"orange"} compact={true}>Buy Now</Button><Button color={"green"} compact={true}>Buy Now</Button><Button color={"blue"} compact={true}>Buy Now</Button><Button color={"yellow"} compact={true}>Buy Now</Button><Button color={"purple"} compact={true} inactive={true}>Buy Now</Button><Button color={"lightEucalyptus"} outlined={true}>Meet The Breeze</Button><Button color={"buffyOrange"} outlined={true}>Meet The Breeze</Button><Button color={"purple"} outlined={true}>Meet The Breeze</Button><Button color={"black"} outlined={true}>Meet The Breeze</Button><Button color={"purple"} compact={true} outlined={true}>Buy Now</Button><Button color={"black"} compact={true} outlined={true}>Buy Now</Button><Button color={"purple"} inactive={true} outlined={true}>Meet The Breeze</Button><Button color={"purple"} compact={true} inactive={true} outlined={true}>Buy Now</Button>Name | Description | Type | Required | Default | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
route | The URL the button directs to when clicked. | string | false | "#" | ||||||||||
color | Button color. | string | false | "lightEucalyptus" | ||||||||||
compact | Smaller sized button if true. | boolean | false | false | ||||||||||
children | Button text. | node | false | "Get Started" | ||||||||||
inactive | Button is not active if true. | boolean | false | false | ||||||||||
outlined | Button uses outline style if true. | boolean | false | false | ||||||||||
onClick | Function that executes when clicked. | function | false | ()=>{} | ||||||||||
className | List of classes for this element. | string | array | false | "" | ||||||||||
forwardRef | Ref to component or DOM element. | function | object | false | null | ||||||||||
| ||||||||||||||
submit | Uses form submit if true. | boolean | false | false | ||||||||||
label | Label to add for accessibility (not visible in visual browsers) | string | false | null | ||||||||||
openNewWindow | Opens link in new window if true. | boolean | false | false | ||||||||||