Package Exports

phoenix-buttons

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 (phoenix-buttons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

phoenix-buttons