Skip to main content

Button properties

Usage

{
type: "button",
name?: string,
id?: string,

text?: string,
submit?: boolean, // false by default
url?: string,

css?: string,
disabled?: boolean, // false by default
height?: string | number | "content", // "content" by default
hidden?: boolean, // false by default
padding?: string | number,
width?: string | number | "content", // "content" by default

// button view
circle?: boolean, // false by default
color?: "danger" | "secondary" | "primary" | "success", // "primary" by default
full?: boolean, // false by default
icon?: string,
loading?: boolean, // false by default
size?: "small" | "medium", // "medium" by default
view?: "flat" | "link", // "flat" by default
}

Description

type(required) the type of a control, set it to "button"
name(optional) the name of a control
id(optional) the id of a control, auto-generated if not set
text(optional) the text label of a button
submit(optional) enables the button to send form data to a server, false by default
url(optional) the URL the post request with form data will be sent to.
The property is required if the submit property is set to true

Related Sample: Form. All controls
css(optional) adds style classes to a control
disabled(optional) defines whether a control is enabled (false) or disabled (true), false by default
height(optional) the height of a control, "content" by default
hidden(optional) defines whether a control is hidden, false by default
padding(optional) sets padding between a cell and a border of a button control
width(optional) the width of a control, "content" by default
circle(optional) makes the corners of a button round, false by default
color(optional) defines the color scheme of a button: "danger" | "secondary" | "primary" | "success", "primary" by default
full(optional) extends a button to the full width of a form, false by default
icon(optional) the CSS class of an icon of the button
loading(optional) adds a spinner into a button, false by default
size(optional) defines the size of a button: "small" | "medium", "medium" by default
view(optional) defines the look of a button: "flat" | "link", "flat" by default

Example

Related article: Button