Puppertino

/

Examples

/

Buttons

### Alert

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

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.

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 and the tabindex="-1" attributes 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.

Primary Btn mob Rounded Outline Outline dashed Custom action

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

## Button colors

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

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:

Small size Medium size Large size Block size

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>

## Icon button.

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.
For accessibility, always make sure to add descriptive text to the icon button using the aria-label attribute.
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" aria-label="Help Button">?</a>

    <a href="#" class="p-btn-icon" aria-label="Custom Button"><!-- SVG ICON HERE --></a>

    <a href="#" class="p-btn-icon p-mint p-silver-100-color" aria-label="Custom Color Button">Custom Color</a>

## Scope buttons.

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.

- Default/Active Button: This button highlights the current route, indicating where the user is within the interface.
- Inactive Button: Used to represent the route the user has just navigated from, providing a clear visual distinction.
- Action Button: This button is designed to prompt user actions, such as saving, copying, or other route-specific tasks.

Default/Active Unactive Disabled Action Action

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="true" tabindex="-1">Disabled</a>

    <a href="#" class="p-btn p-btn-scope p-btn-scope-outline">Action</a>