Usage

Import

import { Button } from '@passfort/castle'

Styles

use type prop to change Button styles.

<Wrap>
  <Button label="Add" />
  <Button type="primary" label="Primary" />
  <Button type="disabled" label="Disabled" />
  <Button type="read-only" label="Read Only" />
  <Button type="positive" label="Positive" />
  <Button type="negative" label="Negative" />
  <Button type="text" label="Text" iconRight="info" />
  <Button type="active" label="Active" iconRight="edit" />
  <Button type="ghost" label="Ghost" iconRight="tungsten" />
</Wrap>
<Wrap>
  <Button label="Add" />
  <Button type="primary" label="Primary" />
  <Button type="disabled" label="Disabled" />
  <Button type="read-only" label="Read Only" />
  <Button type="positive" label="Positive" />
  <Button type="negative" label="Negative" />
  <Button type="text" label="Text" iconRight="info" />
  <Button type="active" label="Active" iconRight="edit" />
  <Button type="ghost" label="Ghost" iconRight="tungsten" />
</Wrap>
content_copy
Copy
live example

Icons

use icon and iconRight to add an Icon element.

<Row>
  <Button icon="check" label="Add" />
  <Button iconRight="check" type="primary" label="Button" />
</Row>
<Row>
  <Button icon="check" label="Add" />
  <Button iconRight="check" type="primary" label="Button" />
</Row>
content_copy
Copy
live example

Icon only

use icon and iconRight to add an Icon element.

<Row>
  <Button icon="check" />
  <Button label="check" />
</Row>
<Row>
  <Button icon="check" />
  <Button label="check" />
</Row>
content_copy
Copy
live example

Loading

<Row>
  <Button icon="check" loading />
  <Button type="primary" icon="check" loading label="Check" />
</Row>
<Row>
  <Button icon="check" loading />
  <Button type="primary" icon="check" loading label="Check" />
</Row>
content_copy
Copy
live example

Button Group

import { ButtonGroup } from '@passfort/castle'

<ButtonGroup>
  <Button icon="copy_all" label="Copy" />
  <Button type="disabled" iconRight="delete" />
</ButtonGroup>
<ButtonGroup>
  <Button icon="copy_all" label="Copy" />
  <Button type="disabled" iconRight="delete" />
</ButtonGroup>
content_copy
Copy
live example

Small buttons

<Row>
  <Button small icon="check" loading />
  <Button small type="primary" icon="check" loading label="Check" />
</Row>
<Row>
  <Button small icon="check" loading />
  <Button small type="primary" icon="check" loading label="Check" />
</Row>
content_copy
Copy
live example

Customisation

<Button>
  <Button.Icon icon="sort" />
  <Button.Text>Text</Button.Text>
  <Circle size={5} bg="B0">
    3
  </Circle>
</Button>
<Button>
  <Button.Icon icon="sort" />
  <Button.Text>Text</Button.Text>
  <Circle size={5} bg="B0">
    3
  </Circle>
</Button>
content_copy
Copy
live example

HTML Submit

Use these with a form element to submit the form.

<Row>
  <Button type="submit" label="Submit" />
</Row>
<Row>
  <Button type="submit" label="Submit" />
</Row>
content_copy
Copy
live example