Button

Stable

Our call to actions and their various states.

Description

Probably one of our most (if not the most) commonly used elements in our whole universe of components. Buttons help you guide a user to a desired destination or highlight an important action they must take.

An important note about the button is that it can transpile into both an <a> tag or a <button> tag. This largely depends on passing a href prop.

Usage

Below is an example of how to use the Button and its mark up.

import { Button } from '@artilleryio/alpha-centauri-components'; 

...

<Button
  href="/about"
  variant="primary"
  size="base"
  {...props}>
  About
</Button>

API Reference

Prop	Type	Options	Default value
`href`	`string`		`#`
`variant`	`string`	`primary, secondary, naked, important`	`primary`
`size`	`string`	`base, large`	`base`
`loading`	`boolean`	`true, false`	`false`
`disabled`	`boolean`	`true, false`	`false`
`children`	`any`
`label`	`string`
`IconStart`	`boolean`	`true, false`	`false`
`IconEnd`	`boolean`	`true, false`	`false`
`iconSize`	`string`	`sm, lg`	`sm`
`onClick`	`function`
`ariaLabel`	`string`

Settings

Label

Variant

Size

Disabled

Icon Start

Icon End