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

    0.2.1 • Public • Published

    @o-rango/button

    Provides feedback messages for user actions with alert messages.

    npm version

    Edit o-button on codesandbox

    Demo

    Get Started

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

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

    or

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

    Properties

    //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';

    Customization

     /* Generic Colors variables*/
     --o-button-default: #FAFBFC;
     --o-button-error : #DE350B;
     --o-button-warning:#FFC400;
     --o-button-info:  #0065FF;
     --o-button-success:#36B37E;
     
     /* 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;
     

    Keywords

    none

    Install

    npm i @o-rango/o-button

    DownloadsWeekly Downloads

    1

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    292 kB

    Total Files

    45

    Last publish

    Collaborators

    • romulocintra