Button - Docs

import { Button } from "@eggspot/ui"

Intents

<Button>C-click me</Button>
<Button intent={Button.intents.primary}>C-click me</Button>
<Button intent={Button.intents.success}>C-click me</Button>
<Button intent={Button.intents.warning}>C-click me</Button>
<Button intent={Button.intents.danger}>C-click me</Button>

Sizes

<Button intent={Button.intents.primary} size={Button.sizes.small}>
  C-click me
</Button>
<Button intent={Button.intents.success} size={Button.sizes.medium}>
  C-click me
</Button>
<Button intent={Button.intents.warning} size={Button.sizes.large}>
  C-click me
</Button>

Minimal

<Button minimal>C-click me</Button>
<Button intent={Button.intents.primary} minimal>C-click me</Button>
<Button intent={Button.intents.success} minimal>C-click me</Button>
<Button intent={Button.intents.warning} minimal>C-click me</Button>
<Button intent={Button.intents.danger} minimal>C-click me</Button>

Icons

<Button intent={Button.intents.primary} leftIcon={SvgAppsIcon}></Button>
<Button intent={Button.intents.primary} leftIcon={SvgAppsIcon} minimal></Button>
<Button
  intent={Button.intents.success}
  leftIcon={SvgAppsIcon}
>
  C-click me
</Button>
<Button
  intent={Button.intents.warning}
  leftIcon={SvgAppsIcon}
  rightIcon={SvgArrowRightIcon}
>
  C-click me
</Button>

Disabled

<Button disabled>C-click me</Button>
<Button intent={Button.intents.primary} disabled>
  C-click me
</Button>
<Button intent={Button.intents.success} minimal disabled>
  C-click me
</Button>
<Button intent={Button.intents.warning} disabled>
  C-click me
</Button>
<Button intent={Button.intents.danger} disabled>
  C-click me
</Button>

Props

Attribute	Type	Description	Default
intent	Intents	Change button color	`base`
size	Sizes	Change button size	`medium`
minimal	`boolean`	Change button minimal	`false`
disabled	`boolean`	Disable button	`false`
fill	`boolean`	Filled to its container	`false`
leftIcon	`React.FC<SvgIconProps>`	Left icon of button	-
rightIcon	`React.FC<SvgIconProps>`	Right icon of button	-
onClick	`MouseEventHandler`	Button click handler	-
href	`string`	Button as a link	-
target	`string`	Target of `a` element	`_self`
rel	`string`	-	-
title	`string`	-	-
...	`'id', 'className', ...`	Button native props	-

Types

Intents type

type Intents = 'base' | 'primary' | 'success' | 'warning' | 'danger';

Sizes type

type Sizes = 'small' | 'medium' | 'large';