Usage no npm install needed!

<script type="module">
  import oRangoOButton from 'https://cdn.skypack.dev/@o-rango/o-button';



Provides feedback messages for user actions with alert messages.

npm version

Edit o-button on codesandbox


Get Started

First, npm install within the project or use it directly from CDN:

npm install @o-rango/o-button --save


<script src="./node_modules/@o-rango/o-button/dist/o-button.js"></script>
// OR
<script src="https://unpkg.com/@o-rango/o-button/dist/o-button.js"></script>

Usage example

Button usage examples

      <o-button type="default" fill="solid">Submit</o-button>
        <o-button type="default" disabled fill="solid">Submit</o-button>
        <o-button type="default" fill="outline">Submit</o-button>
        <o-button type="default" disabled fill="dashed">Submit</o-button>
        <o-button type="default" fill="dashed">Submit</o-button>
        <o-button type="default" disabled fill="outline">Submit</o-button>
        <o-button type="default" rounded fill="outline">Submit</o-button>
        <o-button type="default" disabled rounded fill="outline">Submit</o-button>


  @Prop() size?: string; // lg - md - sm
  @Prop() href?: string;
  @Prop({ reflectToAttr: true }) target?: string = '_blank';
  @Prop() block? : boolean = false;
  @Prop() type: string = 'default' //default, error, warning , info , success;
  @Prop() rounded?: boolean = false;
  @Prop({ reflectToAttr: true }) disabled = false;
  @Prop({ reflectToAttr: true})  fill?: 'dashed' | 'outline' | 'solid' = 'solid';


 /* Generic Colors variables*/
 --o-button-default: #FAFBFC;
 --o-button-error : #DE350B;
 --o-button-info:  #0065FF;

 /* Size Style variables  & Font Style variables */
 --o-button-height : 3.5em;
 --o-button-font-size :14px;
 --o-button-font-weight : 600;
 --o-button-font-family : 'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', 'Helvetica Neue', Helvetica, sans-serif;
 --o-button-font-color-light : #FFFFFF;
 --o-button-font-color-dark : #091E42;