@devseed-ui/button

This component **may** require [collecticons](/collecticons) to be included if you're using the `useIcon` prop.
You'll see strange characters (example �) in place of icons if collecticons is missing.

Variation

Buttons come in different variations:

• primary-raised-light
• primary-raised-semidark
• primary-raised-dark
• primary-plain
• danger-raised-light
• danger-raised-dark
• danger-plain
• success-raised-light
• success-raised-dark
• success-plain
• achromic-plain
• achromic-glass
• base-raised-light
• base-raised-semidark
• base-raised-dark
• base-plain

  <DevseedUiThemeProvider>
    <style>{`
      .line {
        margin-bottom: 1rem;
      }
      .line > * {
        margin-right: 0.5rem;
      }
      .achromic {
        background: #443F3F;
        padding: 0.5rem;
      }
    `}</style>
    <p className="line">
      <Button variation="base-plain">base-plain</Button>
      <Button variation="primary-plain">primary-plain</Button>
      <Button variation="success-plain">success-plain</Button>
    </p>

    <p className="line">
      <Button variation="primary-raised-light">primary-raised-light</Button>
      <Button variation="primary-raised-semidark">primary-raised-semidark</Button>
      <Button variation="primary-raised-dark">primary-raised-dark</Button>
    </p>

    <p className="line">
      <Button variation="danger-raised-light">danger-raised-light</Button>
      <Button variation="danger-raised-dark">danger-raised-dark</Button>
    </p>

    <p className="line">
      <Button variation="success-raised-light">success-raised-light</Button>
      <Button variation="success-raised-dark">success-raised-dark</Button>
    </p>

    <p className="line achromic">
      <Button variation="achromic-plain">achromic-plain</Button>
      <Button variation="achromic-glass">achromic-glass</Button>
    </p>

    <p className="line">
      <Button variation="base-raised-light">base-raised-light</Button>
      <Button variation="base-raised-semidark">base-raised-semidark</Button>
      <Button variation="base-raised-dark">base-raised-dark</Button>
    </p>
  </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: "variation"
    Type: "One of: primary-raised-light | primary-raised-semidark | primary-raised-dark | primary-plain | danger-raised-light | danger-raised-dark | danger-plain | success-raised-light | success-raised-dark | success-plain | achromic-plain | achromic-glass | base-raised-light | base-raised-semidark | base-raised-dark | base-plain"
    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"