Button

View source on GitHub

Button is an interactive component activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs a programmable action, such as submitting a form or opening a dialog.

import { Button } from "design-system";
import { Button } from "design-system";


<Button>Enter</Button>
<Button>Enter</Button>

Props

Name	Description	DefaultValue	required	type
children	Button content	-	true	ReactNode
variant	Sets the style of the button	primary	false	"primary" \| "secondary"
size	Sets the size	medium	false	"small" \| "medium" \| "large"
href	Sets the link of the button	-	false	string

Variants


<Stack align="center">
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
</Stack>
<Stack align="center">
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
</Stack>

Sizes


<Stack align="center">
  <Button size="small">Small</Button>
  <Button size="medium">Medium</Button>
  <Button size="large">Large</Button>
</Stack>
<Stack align="center">
  <Button size="small">Small</Button>
  <Button size="medium">Medium</Button>
  <Button size="large">Large</Button>
</Stack>

Edit this page