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
  ButtonDisabled,
5
} from "slate-react-system";


Regular width


There are three variations of the button component.
Primary, Secondary and Disabled.

   

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 ExampleDisabled extends React.Component {
13
  render() {
14
    return <ButtonDisabled>Disabled Button</ButtonDisabled>;
15
  }
16
}



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 ExampleDisabledFull extends React.Component {
13
  render() {
14
    return <ButtonDisabled full>Disabled button full</ButtonDisabled>;
15
  }
16
}



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 ExampleDisabledLabel extends React.Component {
15
  render() {
16
    return <ButtonDisabled type="label">Disabled Button Label</ButtonDisabled>;
17
  }
18
}



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

ComponentsAvatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source