Used to trigger actions, submit forms, or navigate users through the application. The Button component is highly customizable, supporting various styles, icons, loading states, and sizes to fit different use cases.

Usage

Import

import { Button } from '@passfort/castle'
content_copy
Copy

Styles

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

Icons

Use the icon and iconRight props to add icons to the left and right sides of the button, respectively.

<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

Create buttons that contain only an icon without any label. This is useful for actions like close buttons or toggles.

<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

Connected Buttons

Use the Connected component with a custom group prop to achieve a connected button effect. By default, buttons belong to the group="button".

import { Connected } from '@passfort/castle'
content_copy
Copy

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

Small buttons

Toggle the small prop to render smaller versions of the button, suitable for compact interfaces or denser layouts.

<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

Customize the button's content and structure using sub-components like Button.Icon and Button.Text. This allows for more complex button layouts and integrations.

<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 buttons with the type="submit" prop within form elements to handle form submissions.

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