Phoenix Buttons

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.

This repository is a module of the full phoenix repository.

Install

This repository is distributed with npm. After installing npm, you can install phoenix-buttons with this command.

$ npm install --save phoenix-buttons

Explorer

Check out how to use phoenix Buttons with React 16, Webpack 4 and Babel 7 here

NPM

Get the latest phoenix-buttons here

Usage

You can import it like this.

import { MaterialButton } from 'phoenix-buttons'

MaterialButtons

MaterialButtons allow users to take actions, and make choices, with a single tap.

ContainedMaterialButtons

ContainedMaterialButtons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

Contained Default MaterialButton

  <MaterialButton
    variant="contained"
    onClick={handleOnClick}
  >
    Default
  </MaterialButton>

Contained Primary MaterialButton

  <MaterialButton
    variant="contained"
    color="primary"
    onClick={handleOnClick}
  >
    Primary
  </MaterialButton>

Contained Secondary MaterialButton

  <MaterialButton
    variant="contained"
    color="secondary"
    onClick={handleOnClick}
  >
    Secondary
  </MaterialButton>

Contained Disabled MaterialButton

  <MaterialButton
    variant="contained"
    onClick={handleOnClick}
    disabled
  >
    Disabled
  </MaterialButton>

Contained Link MaterialButton

  <MaterialButton
    variant="contained"
    href="https://github.com/code-star/phoenix"
    onClick={handleOnClick}
  >
    Link
  </MaterialButton>

Contained Upload MaterialButton

  <MaterialButton
    variant="contained"
    id="contained-button-file"
    upload
    onClick={handleOnClick}
  >
    Upload
  </MaterialButton>

TextMaterialButtons

TextMaterialButtons are typically used for less-pronounced actions, including those located:

• In dialogs
• In cards

In cards, text buttons help maintain an emphasis on card content.

Text Default MaterialButton

  <MaterialButton
    onClick={handleOnClick}
  >
    Default
  </MaterialButton>

Text Primary MaterialButton

  <MaterialButton
    color="primary"
    onClick={handleOnClick}
  >
    Primary
  </MaterialButton>

Text Secondary MaterialButton

  <MaterialButton
    color="secondary"
    onClick={handleOnClick}
  >
    Secondary
  </MaterialButton>

Text Disabled MaterialButton

  <MaterialButton
    onClick={handleOnClick}
    disabled
  >
    Disabled
  </MaterialButton>

Text Link MaterialButton

  <MaterialButton
    href="https://github.com/code-star/phoenix"
    onClick={handleOnClick}
  >
    Link
  </MaterialButton>

Text Upload MaterialButtons

  <MaterialButton
    upload
    id="flat-button-file"
    onClick={handleOnClick}
  >
    Upload
  </MaterialButton>

OutlinedMaterialButtons

OutlinedMaterialButtons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.

Outlined Default MaterialButton

  <MaterialButton
    variant="outlined"
    onClick={handleOnClick}
  >
    Default
  </MaterialButton>

Outlined Primary MaterialButton

  <MaterialButton
    variant="outlined"
    color="primary"
    onClick={handleOnClick}
  >
    Primary
  </MaterialButton>

Outlined Secondary MaterialButton

  <MaterialButton
    variant="outlined"
    color="secondary"
    onClick={handleOnClick}
  >
    Secondary
  </MaterialButton>

Outlined Disabled MaterialButton

  <MaterialButton
    variant="outlined"
    onClick={handleOnClick}
    disabled
  >
    Disabled
  </MaterialButton>

Outlined Link MaterialButton

  <MaterialButton
    variant="outlined"
    href="https://github.com/code-star/phoenix"
    onClick={handleOnClick}
  >
    Link
  </MaterialButton>

Outlined Upload MaterialButtons

  <MaterialButton
    variant="outlined"
    upload
    id="outlined-button-file"
    onClick={handleOnClick}
  >
    Upload
  </MaterialButton>

License

MIT © CODE.STΛR