Demo

Gradient Button

HTML Demo

@codext/stencil-components

npm i @codext/stencil-components --save

How to use:

Gradient Button

Import the Component:

<script src="https://unpkg.com/@codext/[email protected]/dist/gradient-button.js"></script>

Use it in HTML:

  <codext-gradient-button color="darkblue">Gradient Button - Darkblue</codext-gradient-button>

  <codext-gradient-button color="green">Gradient Button - Green</codext-gradient-button>

  <codext-gradient-button color="pink">Gradient Button - Pink</codext-gradient-button>

  <codext-gradient-button color="blue">Gradient Button - Blue</codext-gradient-button>

Options

  /**
   * The button size.
   * Possible values are: `"small"`, `"default"`, `"large"`.
   */
  @Prop() size: 'small' | 'default' | 'large';

  /**
   * If true, the user cannot interact with the button. Defaults to `false`.
   */
  @Prop() disabled = false;


  /**
   * If true, activates a button with rounded corners.
   */
  @Prop() round = false;

  /**
   * Set to `"block"` for a full-width button or to `"full"` for a full-width button
   * without left and right borders.
   */
  @Prop() expand: 'full' | 'block';

  /**
   * If true, activates a button with a heavier font weight.
   */
  @Prop() strong = false;

  /**
   * Default options are: `"darkblue"`, `"green"`, `"pink"`, `"blue"`.
   */
  @Prop() color: string;

Local Development

npm install

npm start