Skip to content

Components

Ankith Swaraj edited this page Jan 5, 2022 · 4 revisions

Button

Quick start

Here's a quick start guide to get started with the button component

| Attributes | Values | Optional ? | | :--------- | :-----------------------------: | ---------: | --------- | ---------- | --- | | variant | "default" | "light" | "ghost" | "hallow"; | Yes | | padding | "small" | "medium" | "large"; | Yes | | fontSize | "small" | "medium" | "large"; | Yes | | margin | "small" | "medium" | "large"; | Yes | | onClick | () => void; | Yes | | onHover | () => void; | Yes | | ref | RefObject<HTMLButtonElement>; | Yes |

Code Snippets and Examples

Button Default
<div className="App">
	<button>Button default</button>
</div>

Button


Button Light
<div className="App">
	<button variant="light">Button light</button>
</div>

Button


Button Ghost
<div className="App">
	<button variant="ghost">Button ghost</button>
</div>

Button


Button Hallow
<div className="App">
	<button variant="hallow">Button Hallow</button>
</div>

Button


Clone this wiki locally