JSPM – @devseed-ui/button@2.4.3

Package Exports

@devseed-ui/button

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@devseed-ui/button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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"