The Button component is used to trigger an action or event, such as submitting a form or saving users information.
Imports
Import React and the Button Components.
0
import * as React from "react";
7
} from "slate-react-system";
Regular width
There are five variations of the button component.
Primary, Secondary, Tertiary, Disabled, and Warning.
0
class ExamplePrimary extends React.Component {
2
return <ButtonPrimary>Primary Button</ButtonPrimary>;
6
class ExampleSecondary extends React.Component {
8
return <ButtonSecondary>Secondary Button</ButtonSecondary>;
12
class ExampleTertiary extends React.Component {
14
return <ButtonTertiary>Tertiary Button</ButtonTertiary>;
18
class ExampleDisabled extends React.Component {
20
return <ButtonDisabled>Disabled Button</ButtonDisabled>;
24
class ExampleWarning extends React.Component {
26
return <ButtonWarning>Warning Button</ButtonWarning>;
Full width
Each of the button styles has a full width option.
0
class ExamplePrimaryFull extends React.Component {
2
return <ButtonPrimary full>Primary button full</ButtonPrimary>;
6
class ExampleSecondaryFull extends React.Component {
8
return <ButtonSecondary full>Secondary button full</ButtonSecondary>;
12
class ExampleTertiaryFull extends React.Component {
14
return <ButtonTertiary full>Tertiary button full</ButtonTertiary>;
18
class ExampleDisabledFull extends React.Component {
20
return <ButtonDisabled full>Disabled button full</ButtonDisabled>;
24
class ExampleWarningFull extends React.Component {
26
return <ButtonWarning full>Warning button full</ButtonWarning>;
Labels
You can add the type='label' property to convert any of the above buttons into a label.
0
class ExamplePrimaryLabel extends React.Component {
2
return <ButtonPrimary type="label">Primary Button Label</ButtonPrimary>;
6
class ExampleSecondaryLabel extends React.Component {
9
<ButtonSecondary type="label">Secondary Button Label</ButtonSecondary>
14
class ExampleTertiaryLabel extends React.Component {
17
<ButtonTertiary type="label">Tertiary Button Label</ButtonTertiary>
22
class ExampleDisabledLabel extends React.Component {
24
return <ButtonDisabled type="label">Disabled Button Label</ButtonDisabled>;
28
class ExampleWarningLabel extends React.Component {
30
return <ButtonWarning type="label">Warning Button Label</ButtonWarning>;
Accepted React Properties
NameTypeDefaultDescription
type
string
null
If set to 'label', button will be a label.
full
boolean
false
If true, width is set to 100%. Otherwise, width is according to the content of the button.