Buttons View Source



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";
1
import {
2
  ButtonPrimary,
3
  ButtonSecondary,
4
  ButtonTertiary,
5
  ButtonDisabled,
6
  ButtonWarning,
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 {
1
  render() {
2
    return <ButtonPrimary>Primary Button</ButtonPrimary>;
3
  }
4
}
5
6
class ExampleSecondary extends React.Component {
7
  render() {
8
    return <ButtonSecondary>Secondary Button</ButtonSecondary>;
9
  }
10
}
11
12
class ExampleTertiary extends React.Component {
13
  render() {
14
    return <ButtonTertiary>Tertiary Button</ButtonTertiary>;
15
  }
16
}
17
18
class ExampleDisabled extends React.Component {
19
  render() {
20
    return <ButtonDisabled>Disabled Button</ButtonDisabled>;
21
  }
22
}
23
24
class ExampleWarning extends React.Component {
25
  render() {
26
    return <ButtonWarning>Warning Button</ButtonWarning>;
27
  }
28
}



Full width


Each of the button styles has a full width option.












0
class ExamplePrimaryFull extends React.Component {
1
  render() {
2
    return <ButtonPrimary full>Primary button full</ButtonPrimary>;
3
  }
4
}
5
6
class ExampleSecondaryFull extends React.Component {
7
  render() {
8
    return <ButtonSecondary full>Secondary button full</ButtonSecondary>;
9
  }
10
}
11
12
class ExampleTertiaryFull extends React.Component {
13
  render() {
14
    return <ButtonTertiary full>Tertiary button full</ButtonTertiary>;
15
  }
16
}
17
18
class ExampleDisabledFull extends React.Component {
19
  render() {
20
    return <ButtonDisabled full>Disabled button full</ButtonDisabled>;
21
  }
22
}
23
24
class ExampleWarningFull extends React.Component {
25
  render() {
26
    return <ButtonWarning full>Warning button full</ButtonWarning>;
27
  }
28
}



Labels


You can add the type='label' property to convert any of the above buttons into a label.

       



0
class ExamplePrimaryLabel extends React.Component {
1
  render() {
2
    return <ButtonPrimary type="label">Primary Button Label</ButtonPrimary>;
3
  }
4
}
5
6
class ExampleSecondaryLabel extends React.Component {
7
  render() {
8
    return (
9
      <ButtonSecondary type="label">Secondary Button Label</ButtonSecondary>
10
    );
11
  }
12
}
13
14
class ExampleTertiaryLabel extends React.Component {
15
  render() {
16
    return (
17
      <ButtonTertiary type="label">Tertiary Button Label</ButtonTertiary>
18
    );
19
  }
20
}
21
22
class ExampleDisabledLabel extends React.Component {
23
  render() {
24
    return <ButtonDisabled type="label">Disabled Button Label</ButtonDisabled>;
25
  }
26
}
27
28
class ExampleWarningLabel extends React.Component {
29
  render() {
30
    return <ButtonWarning type="label">Warning Button Label</ButtonWarning>;
31
  }
32
}



Accepted React Properties


Buttons
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.


ComponentsAvatar GroupButtonsCard TabsCheckboxesColorsDropdownsGlobeHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source