Button
Button Sizes
Define a button size with .button-xs,
.button-s, .button-m, .button-l or .button--xl. The default button size is .button-m.
<button type="button" class="btn btn-primary btn-xs">Button</button>
<button type="button" class="btn btn-primary btn-s">Button</button>
<button type="button" class="btn btn-primary btn-m">Button</button>
<button type="button" class="btn btn-primary btn-l">Button</button>
<button type="button" class="btn btn-primary btn-xl">Button</button>Button Flat
Flat buttons should be used to signify
necessary or mandatory actions. There are four color options.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-positive">Positve</button>
<button type="button" class="btn btn-negative">Negative</button>Button Ghost
Ghost buttons should be used to signify
optional, infrequent or subtle actions. The color options are specified with an additional
class .bg-marvel--hover, .bg--orange--hover, .bg--negative--hover, etc.
<button type="button" class="btn btn-ghost-primary">Primary</button>
<button type="button" class="btn btn-ghost-secondary">Secondary</button>
<button type="button" class="btn btn-ghost-positive">Positve</button>
<button type="button" class="btn btn-ghost-negative">Negative</button>Button Block
Special case buttons to fill 100% widht of
<div> using btn-block class.
<button type="button" class="btn btn-primary btn-block">Primary Block</button>Disabled Button
Disabled buttons receive a disabled
attribute.
<button type="button" class="btn btn-primary" disabled>Disabled</button>Button With Icon
Buttons with icons are wrapped in a parent
component.rupaicon which has to have the button size applied to with an additional class.
For example,.button-m will have a parent element with a class .rupaicon-m. The icon has to
be placed straight after the button and inline SVG.
<button type="button" class="btn btn-ghost-primary"><span><i class="icon anticon icon-bars"></i></span> Menu</button>
<button type="button" class="btn btn-ghost-primary"><span><i class="icon anticon icon-bars"></i></span></button>