Button

This component can render a large variety of buttons. Use the Demo below to generate the desired button type.

Usage

import { Button } from '@binarycapsule/ui-capsules';

isLoading

disabled

children

variant

primary

size

medium

leftIcon

none

rightIcon

none

iconVariant

solid

<Button>
  Button Text
</Button>

Name	Description
children Required	string The text of the button.
variant	"primary" \| "secondary" \| "error" \| "ghost" \| "ghostGray" \| "link"(Default: "primary") Controls the button appearance.
as	"a" \| "button"(Default: "button") Controls which tag gets rendered (<button> or <a>).
leftIcon	string(Default: undefined) Pass an icon string to render an icon before the button's text.
rightIcon	string(Default: null) Pass an icon string to render an icon after the button's text.
iconVariant	"solid" \| "outline"(Default: "solid") The icon variant to render.
disabled	boolean(Default: false) If set to true, the button will be disabled.
isLoading	boolean(Default: false) If set to true, the button will be disabled and it will display a loading indicator.
size	"small" \| "medium" \| "large"(Default: medium) Changes the size of the button.
type	"button" \| "submit"(Default: button) Set this prop to "submit" when the button should submit a form.