@devseed-ui/button

    3.1.0 • Public • Published

    @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"
    

    Install

    npm i @devseed-ui/button

    DownloadsWeekly Downloads

    86

    Version

    3.1.0

    License

    MIT

    Unpacked Size

    60.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • hnhubner
    • danielfdsilva
    • vgeorge