Buttons are user interface elements that initiates actions. This is their primary function and it is this function that makes them very different from links particularly on the web.
Button properties
Property Description Type Default Version backgroundColor Sets the background color of the button string- block Allow button take full width of the parent element booleanfalse color Sets the color of the button string- danger Use if call-to-action is irreversible or destructive booleanfalse disabled Set disabled state so buttons look inactive and cannot be interacted with. booleanfalse loading Set the loading status of the button booleanfalse onClick Callback fired when a button is clicked. (event) => void- pill Set shape of button to pill-shaped. booleanfalse size How large should the button be? large medium smallmediumvariant What variant of the button is to be used? primary secondary ghostprimary
import { Button , BrowserWindow } from 'camara' ;
render (
< BrowserWindow docs >
< Button variant = " primary " > Primary </ Button >
< Button variant = " secondary " > Secondary </ Button >
< Button variant = " ghost " > Ghost </ Button >
</ BrowserWindow >
) ;
import { Button , BrowserWindow } from 'camara' ;
render (
< BrowserWindow docs >
< Button size = " large " > Large </ Button >
< Button size = " medium " > Medium </ Button >
< Button size = " small " > Small </ Button >
</ BrowserWindow >
) ;
import { Button , BrowserWindow } from 'camara' ;
render (
< BrowserWindow docs >
< Button disabled variant = " primary " >
Primary
</ Button >
< Button disabled variant = " secondary " >
Secondary
</ Button >
< Button disabled variant = " ghost " >
Ghost
</ Button >
</ BrowserWindow >
) ;
import { Button , BrowserWindow } from 'camara' ;
render (
< BrowserWindow docs >
< Button danger variant = " primary " >
Primary
</ Button >
< Button danger variant = " secondary " >
Secondary
</ Button >
< Button danger variant = " ghost " >
Ghost
</ Button >
</ BrowserWindow >
) ;
import { Button , BrowserWindow } from 'camara' ;
render (
< BrowserWindow docs >
< Button pill variant = " primary " >
Primary
</ Button >
< Button pill variant = " secondary " >
Secondary
</ Button >
< Button pill variant = " ghost " >
Ghost
</ Button >
</ BrowserWindow >
) ;
import { Button , BrowserWindow } from 'camara' ;
render (
< BrowserWindow docs >
< Button block variant = " primary " >
Primary
</ Button >
< Button block variant = " secondary " >
Secondary
</ Button >
< Button block variant = " ghost " >
Ghost
</ Button >
</ BrowserWindow >
) ;
import { Button , BrowserWindow } from 'camara' ;
render (
< BrowserWindow docs >
< Button pill variant = " primary " backgroundColor = " green " >
Primary
</ Button >
< Button pill variant = " secondary " backgroundColor = " green " >
Secondary
</ Button >
< Button pill variant = " ghost " backgroundColor = " green " >
Ghost
</ Button >
</ BrowserWindow >
) ;
import { Button , BrowserWindow } from 'camara' ;
render (
< BrowserWindow docs >
< Button pill variant = " primary " backgroundColor = " #fff " color = " purple " >
Primary
</ Button >
< Button pill variant = " secondary " backgroundColor = " purple " color = " #fff " >
Secondary
</ Button >
< Button pill variant = " ghost " color = " purple " >
Ghost
</ Button >
</ BrowserWindow >
) ;
← Browser Window Camara Theme → 