@devseed-ui/button

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

Guidelines and examples

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: "combination of primary/base/danger/success-raised/plain-light/semidark/dark"
    Description: "Sets the style variant of the button"
    Default value: "base-plain"
  - Prop name: "size"
    Type: "oneOf ['small', 'medium', 'large', 'xlarge']"
    Description: "Sets the size of the button"
    Default value: "medium"
  - Prop name: "radius"
    Type: "oneOf ['ellipsoid','square', 'rounded']"
    Description: "The value for the radius"
    Default value: "rounded"
  - Prop name: "box"
    Type: "oneOf ['block','semi-fluid', 'null']"
    Description: "The value for the box."
    Default value: "null"
  - Prop name: "active"
    Type: "bool"
    Description: "Whether the button is in an active state."
    Default value: "false"
  - Prop name: "hideText"
    Type: "bool"
    Description: "Whether the button text should be hidden"
    Default value: "false"
  - Prop name: "disabled"
    Type: "bool"
    Description: "Whether the button should be disabled."
    Default value: "false"
  - Prop name: "visuallyDisabled"
    Type: "bool"
    Description: "Whether the button should be visually disabled. A visually disabled button looks disabled but retains the mouse events. This is useful to trigger tooltips on hover."
    Default value: "false"
  - Prop name: "useIcon"
    Type: "oneOf [array, string]"
    Description: "The value for the icon. Has to be the name of a collecticon. If an array is used instead of a string, the first position is the name of the icon, and the second the position ('before' | 'after')."
    Default value: "null"
  - Prop name: "onClick"
    Type: "func"
    Description: "Click event handler"
    Default value: "f => f"