Some of the components/functionalities provided in this version of the framework will be changing moving forward.
To keep yourself updated, and understand how to migrate to newer versions, follow @codedgar_dev
Buttons are a key component of any interface, serving as interactive elements that guide user actions. In Puppertino, buttons have been designed with flexibility and accessibility in mind, supporting a variety of use cases across links, buttons, and form submissions.
Push buttons come in several variations to suit different scenarios. They can be implemented as <a> or <button>elements, depending on the context. For cases where buttons need to be disabled, the disabled attribute can be applied to prevent user interaction. This ensures that the buttons are visually and functionally consistent with your design while maintaining clear communication with users about available actions.
Usage:
<a href="#" class="p-btn">Default</a>
<button class="p-btn p-btn-destructive">Destructive</button>
<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>
Customizing button colors in Puppertino is now easier and more flexible. In earlier versions, applying the p-btn-mob class was required for color changes. In the latest release, any button's color can be modified without additional classes.
You can select from the predefined colors in Puppertino's color palette or apply custom colors directly via your own CSS, giving you full control over button styling to match your design needs.
Usage:
<button class="p-btn p-prim-col p-grape p-white-color p-white-color">Primary Purple</button>
<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 one of the most requested features during Puppertino's alpha phase. In response to that feedback, Puppertino now offers four distinct button sizes, providing flexibility to fit various design contexts:
Usage:
<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-block">Block size</a>
The Icon Button, previously known as the "Help Button", is a circular button that contains an icon. You can use a letter, font-based icons (such as Font Awesome), or an SVG. For more details on available icons, refer to the icons section.
Customization is straightforward: you can modify the border and icon colors using the color property or by applying classes from the Color palette. If you'd like to remove the button's borders, simply add the p-btn-icon-no-border class.
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 function similarly to Push Buttons but are designed specifically for use in navigation routes. They should not replace standard buttons but complement them in route-based contexts.
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>