Button
Buttons allow users to trigger actions with a single click.
Import
import { Button } from "@gumtree/ui/Button" ; Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "accent" | "ghost" | "link" | "neutral" | "brand" | - | Visual style of the button |
size | "xs" | "sm" | "md" | "lg" | - | Size of the button |
outline | boolean | false | Render as outline style |
children | ComponentChildren | - | Button content |
Examples
Variants
Buttons come in several visual variants.
< Button variant = "primary" > Primary </ Button >
< Button variant = "secondary" > Secondary </ Button >
< Button variant = "accent" > Accent </ Button >
< Button variant = "ghost" > Ghost </ Button >
< Button variant = "link" > Link </ Button >
< Button variant = "neutral" > Neutral </ Button > Sizes
Buttons can be rendered in different sizes.
< Button variant = "primary" size = "xs" > Extra Small </ Button >
< Button variant = "primary" size = "sm" > Small </ Button >
< Button variant = "primary" size = "md" > Medium </ Button >
< Button variant = "primary" size = "lg" > Large </ Button > Outline
Outline buttons have a transparent background with a border.
< Button variant = "primary" outline > Primary </ Button >
< Button variant = "secondary" outline > Secondary </ Button >
< Button variant = "accent" outline > Accent </ Button > Brand
The brand variant features a 3D shadow press effect for primary call-to-action buttons.
< Button variant = "brand" > Clone </ Button >
< Button variant = "brand" size = "sm" > New Repo </ Button >