Button

An interactive element that triggers an action when clicked

Prop	Type	Description
children	React.Node	Accpets children to render
seconday?	boolean	Secondary button variation
outline?	boolean	Outline button variation
ghost?	boolean	Ghost button variation
link?	boolean	Sets link attribute
href?	string	Sets href attribute for a link
disabled?	boolean	Disables the button
destructive?	boolean	Destructive button variation
submit?	boolean	Sets submit attribute
onClick?	() => void	Sets onClick method
expand?	string	Button takes all the horizontal space
className?	string	Sets class attribute
style?	CSSProperties	Sets CSS styles

import { Button } from "@brick-uikit/input";

Usage button

Visual options

The button supports several visual options that help you adjust to the design system and hierarchy of the interface

example.tsx

<Row>
	<Button>Default</Button>
	<Button secondary>Secondary</Button>
	<Button outline>Outline</Button>
	<Button ghost>Ghost</Button>
</Row>

Logic states

Logic states help inform the behavior and meaning of a button: reference format, disabled state or warning about a dangerous action. These options change not only the appearance, but also how the user interacts with the button

example.tsx

<Row>
	<Button link href={"#LogicState"}>Link</Button>
	<Button disabled>Disabled</Button>
	<Button destructive>Destructive</Button>
</Row>

Expand

You can use the expand property to expand the button to all the available width of the screen. This is really useful for mobile first projects

Install BrickUI?

example.tsx

<h3>Install BrickUI?</h3>
<Spacer top={2}/>
<Button expand>Yay</Button>
<Spacer top={1}/>
<Button expand destructive>NOO! I want my mommy!</Button>

Form usage

You can use the button inside forms to trigger both form submission and custom click handlers. When the button has type='submit', the form's onSubmit event will be triggered automatically

form.tsx

<form
  onSubmit={(e) => {
    e.preventDefault();
    console.log("Form submitted");
  }}
>
  <Button
    onClick={() => console.log("Clicked!")}
    type="submit"
  >
    Submit
  </Button>
</form>

Customization

You can use className to apply your own CSS modules or utility classes, and styles to directly override individual CSS properties when needed. This is useful for creating special-case buttons, state-dependent styling, or small one-off adjustments

example.tsx

<Button className={styles.glow}>
	Glow button
</Button>
<Button 
	style={{
		background: "linear-gradient(90deg, #931a04, #e3492d)",
		color: "#DDD",
		border: "1px solid #931a04"
	}}>
	Inline Gradient
</Button>