@pmwcs/button
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Buttons

Buttons communicate the action that will occur when the user touches them.

  • Module @pmwcs/button
  • Import styles:
    • Using CSS Loader
      • import '@pmwcs/button/styles';
    • Or include stylesheets
      • '@material/button/dist/mdc.button.css'
      • '@pmwcs/@pmwcs/icon/icon.css'
      • '@material/ripple/dist/mdc.ripple.css'
  • MDC Docs: https://material.io/develop/web/components/buttons/
<Button label="Button" />
<>
  <Button label="Icon" icon="favorite" />
  <Button label="Trailing" trailingIcon="keyboard_arrow_right" />
  <Button label="Loading" icon={<CircularProgress />} />
</>
<>
  <Button label="Raised" raised />
  <Button label="Unelevated" unelevated />
  <Button label="Outlined" outlined />
  <Button label="Dense" dense />
  <Button label="No Ripple" ripple={false} />
</>
<>
  <Button label="Danger" danger raised />
  <Button label="Danger" danger outlined />
  <Button label="Danger" danger />
</>
<>
  <Button
    label="With Theme"
    raised
    theme={['secondaryBg', 'onSecondary']}
  />
  {/**
    This example uses "accent" to control the color of the Ripple.
    See the documentation on Ripples.
  */}
  <Button label="With Theme" theme="secondary" />
</>
<Button>
  {/** Alternatively pass content as children */}
  As Children
</Button>

Button

The Button component.

Props

Name Type Description
children React.ReactNode Content specified as children.
danger undefined | false | true Used to indicate a dangerous action.
dense undefined | false | true Make the Button dense.
disabled undefined | false | true Make the button disabled
activated undefined | false | true Make the button activated
icon PMWCS.IconPropT An Icon for the Button
label React.ReactNode | any Content specified as a label prop.
primary undefined | false | true Make the button primary.
secondary undefined | false | true Make the button secondary.
outlined undefined | false | true Make the button outlined.
raised undefined | false | true Make the Button raised.
ripple RipplePropT Adds a ripple effect to the component
trailingIcon PMWCS.IconPropT A trailing icon for the Button
unelevated undefined | false | true Make the button unelevated.

References

Dependents (4)

Package Sidebar

Install

npm i @pmwcs/button

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

16 kB

Total Files

11

Last publish

Collaborators

  • commenthol