Buttons are the main thing that move the interface. That's why it was
the main thing that was developed for Puppertino.
Puppertino
buttons support usage as links, buttons and submit elements.
Push buttons come in different variations according to your needings. It can be used as <a> elements or <button> elements. For buttons, is suggested that you use the attribute disabled if you desire to disable them.
Usage:
<a href="#" class="p-btn">Default</a>
<a href="#" class="p-btn p-btn-disabled">Disabled</a>
<a href="#" class="p-btn p-prim-col">Primary</a>
<a href="#" class="p-btn p-btn-mob">Btn mob</a>
<a href="#" class="p-btn p-btn-round">Rounded</a>
<a href="#" class="p-btn p-btn-more">Custom action</a>
Color customization in buttons is pretty simple. You will need to have the class p-btn-mob to disable the shadow and border of the button.
You can use the colors available in Color palette or custom colors defined in your own CSS.
Usage:
<button class="p-btn p-btn-mob p-lime p-white-color p-white-color">Success</button>
<button class="p-btn p-btn-mob p-orange p-white-color p-white-color">Danger</button>
<button class="p-btn p-btn-mob p-strawberry p-white-color p-white-color">Error</button>
Button sizing was a very requested feature during the alpha version of Puppertino. So now, I'm bringin 4 sizes for button sizes:
Small size Medium size Large size Block sizeUsage:
<a href="#" class="p-btn p-btn-sm">Small size</a>
<a href="#" class="p-btn p-btn-md">Medium size</a>
<a href="#" class="p-btn p-btn-lg">Large size</a>
<a href="#" class="p-btn p-btn-lg p-btn-block">Block size</a>
Direction buttons are used to navigate across your app, and usage is really simple, just use p-btn-direction as a base and p-btn-d-back for back navigation and p-btn-d-next for forward navigation.
Usage:
<a href="#" class="p-btn-direction p-btn-d-back">Prev</a>
<a href="#" class="p-btn-direction p-btn-d-next">Next</a>
The icon button (Before help button), is round button with an icon inside, you can use a letter, an icon based in fonts (Such as Font Awesome) or an SVG. For icons see icons section.
You can set the color of the borders and icon by just changing the color property of the button or by adding the classes present in Color palette. You can also disable borders by adding p-btn-icon-no-border
Usage:
<a href="#" class="p-btn-icon">?</a>
<a href="#" class="p-btn-icon"><!-- SVG ICON HERE --></a>
<a href="#" class="p-btn-icon p-mint p-silver-100-color">Custom Color</a>
Scope buttons are similar to Push buttons, but these are supposed to
be used on routes, and should not replace normal buttons.
The Default/Active button is meant to indicate the
current route that the user is in. While the
Unactive button is supposed to be used in the route
before the current one. And the Action Button is
supposed to indicate any action that the user can do in that route,
like save, copy or others.
Usage:
<a href="#" class="p-btn p-btn-scope">Default/Active</a>
<a href="#" class="p-btn p-btn-scope p-btn-scope-unactive">Unactive</a>
<a href="#" class="p-btn p-btn-scope p-btn-disabled">Disabled</a>
<a href="#" class="p-btn p-btn-scope p-btn-scope-outline">Action</a>