API Docs for: 2.10.19
Show:

oreesh-button Class

KnowRe styled button

// Can be created dynamically
var button = new OreeshButton();


<!-- Or via HTML -->
<oreesh-button>default</oreesh-button>

<oreesh-button simple>default theme with simple</oreesh-button>

<oreesh-button theme='white1' shadow>white1 theme with shadow</oreesh-button>

<oreesh-button disabled theme='white2'>white2 disabled</oreesh-button>

<!-- Changing the size changes the margins and padding, you may want to add more -->
<style>
    oreesh-button[size=small] {
        font-size: small;
    }
</style>
<oreesh-button size='small'>default</oreesh-button>

<!-- You can do more than text -->
<oreesh-button>
        <div class='container'>
            <div class='left'>
                Custom button with divs and image
            </div>
            <div class='right'>
                <div class='img'>
                    <img src='https://cdn0.iconfinder.com/data/icons/weboo-2/512/pin.png'></img>
                </div>
            </div>
        </div>
    </oreesh-button>

Tyler recommends including the following meta tag, so that the mobile browsers won't include a delay when tapping on the button.

<meta name="viewport" content="width=device-width">

Item Index

Attributes

disabled

Boolean

Puts the button into a disabled state, which ignores all user interaction.

no-transition

Boolean

Puts the button into a no-transition attribute, which do not use transition css animation.

shadow

Boolean

Adds a shadow to the button.

simple

Boolean

Adds a simple to the button.

size

String

Changes the margins and padding of the button. The options are default and small.

theme

String

Styles the button based on premade styling. The options are green, white1 and white2.