@devseed-ui/button

Import

  import Button from '@devseed-ui/button';

Guidelines and examples

Button is a default component to display action in a page.

Variation

Button supports x variations:

• base-raised-light is for general actions.
• base-raised-dark is for grey background.
• ...

Actions can be primary or secondary. There should be one primary action per page.

  <DevseedUiThemeProvider>
    <Button
      variation="base-raised-light"
      size="medium"
      className="button-class"
      title="sample button"
      onClick={() => {}}
    >
      Click Me
    </Button>
    <Button
      variation="base-raised-dark"
      size="medium"
      className="button-class"
      title="sample button"
      onClick={() => {}}
    >
      Click Me
    </Button>
  </DevseedUiThemeProvider>

Size

Button supports three sizes – large for emphasized actions, medium as default, and small as alternative to medium.

  <DevseedUiThemeProvider>
    <Button
      variation="base-raised-light"
      size="small"
      className="button-class"
      title="sample button"
      onClick={() => {}}
    >
      Click Me
    </Button>
    <Button
      variation="base-raised-light"
      size="medium"
      className="button-class"
      title="sample button"
      onClick={() => {}}
    >
      Click Me
    </Button>
    <Button
      variation="base-raised-light"
      size="large"
      className="button-class"
      title="sample button"
      onClick={() => {}}
    >
      Click Me
    </Button>
  </DevseedUiThemeProvider>

API Documentation

rows:
  - Prop name: "variant"
    Type: "oneOf ['default', 'primary', 'info', 'danger', 'dark']"
    Description: "Sets the style variant of the button"
    Default value: "default"
  - Prop name: "size"
    Type: "oneOf ['small', 'medium', 'large']"
    Description: "Sets the size of the button"
    Default value: "medium"
  - Prop name: "onClick"
    Type: "func"
    Description: "Click event handler"
    Default value: "f => f"