JSPM

@rmwc/button

14.0.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17738
  • Score
    100M100P100Q131508F
  • License MIT

Package Exports

  • @rmwc/button
  • @rmwc/button/styles

Readme

Buttons

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

  • Module @rmwc/button
  • Import styles:
    • Using CSS Loader
      • import '@rmwc/button/styles';
    • Or include stylesheets
      • '@material/button/dist/mdc.button.css';
      • '@rmwc/@rmwc/icon/icon.css';
      • '@material/ripple/dist/mdc.ripple.css';
  • MDC Docs: https://material.io/develop/web/components/buttons/

Default

<Button label\="Button" />

Icons

<\>

  <Button label\="Icon" icon\="favorite" />

  <Button label\="Trailing" trailingIcon\="keyboard\_arrow\_right" />

  <Button label\="Loading" icon\={<CircularProgress />} />

</\>

Variants

<\>

  <Button label\="Raised" raised />

  <Button label\="Unelevated" unelevated />

  <Button label\="Outlined" outlined />

  <Button label\="Dense" dense />

  <Button label\="No Ripple" ripple\={false} />

</\>

Danger

<\>

  <Button label\="Danger" danger raised />

  <Button label\="Danger" danger outlined />

  <Button label\="Danger" danger />

</\>

Theming

<\>

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

</\>

Children

<Button\>

  {/\*\* Alternatively pass content as children \*/}

  As Children

</Button\>

Touch Target Wrapper

<\>

  {/\*\* Wrapping a button in TouchTargetWrapper will automatically set its \`touch\` prop to true. \*/}

  <TouchTargetWrapper\>

    <Button\>Touch Accessible</Button\>

  </TouchTargetWrapper\>

</\>

Button