Button

This is the <Button /> component

---

Examples

Button types

Primary button variants

Presentation

Source

@candy/kitkat/button

///Primary Button<Button appearance="primary">Primary Default</Button>///Primary Button color black<Button appearance="primary" colorScheme="black">Primary - Black</Button>///Primary Button color white<Button appearance="primary" colorScheme="white">Primary - White</Button>// Primary Button color white disabled<Button appearance="primary" colorScheme="white" disabled>Primary Disabled</Button>

Secondary button variants

Presentation

Source

@candy/kitkat/button

// Secondary Button <Button appearance="secondary">secondary Button</Button>// Secondary Button color black<Button appearance="secondary" colorScheme="black">Secondary - Black</Button>// Secondary Button color white disabled<Button appearance="secondary" colorScheme="white" disabled> Button Disabled</Button>

Tertiary button variants

Presentation

Source

@candy/kitkat/button

// Tertiary Button <Button appearance="tertiary">Tertiary Default</Button>// Tertiary Button color black<Button appearance="tertiary" colorScheme="black">Tertiary - Black</Button>Secondary - Black</Button>// Tertiary Button color white disabled<Button appearance="tertiary" colorScheme="white">Tertiary - White</Button>

Button sizes

Presentation

Source

@candy/kitkat/button

// Small Button <Button appearance="primary" size="sm">Primary Button Small</Button>// Large Button <Button appearance="primary" size="lg">Primary Button Large</Button>Secondary - Black</Button>// Tertiary Button color white disabled<Button appearance="primary" fullWidth>Primary Button Full</Button>

---

Basic Usage

import Button from '@candy/kitkat/button'

export const MyComponent = () => {
  return <Button>My Button Text</Button>
}

---

Component API

Name	Type	Default	Description
appearance	primary / secondary / tertiary	color Variants
children	ReactNode	-	Button text /icons
colorScheme	black / white	-	color variants
disabled	boolean	-	disable button
fullWidth	boolean	-	make width 100%
onClick	() => void	-	Click event,
outlined	boolean	-	outlined
justify	flex-start / flex-end / center / space-between / space-around / space-evenly / start / end / left / right / safe / unsafe	-	Button alignment
size	sm / md / lg	-	Button size
uppercase	boolean	-	Make text uppercase