Button Secondary

A button component designed for secondary actions, featuring subtle visual styling to complement primary buttons. Provides clear feedback and supports various interactive states including loading and disabled conditions.

Distinct visual styling for secondary actions

Support for loading and disabled states

Architecture

so-button-secondary
Slot: default

Reference

  • Button Secondary

    The component that manages the button's behavior and appearance. Handles user interactions and provides visual feedback for different states.

    • Attributes

      • aria-label
        string
        /
        default: -

        Defines an accessible label for the button when a visible label is not present or when additional context is needed for screen readers.

      • disabled
        boolean
        /
        default: false

        When true, prevents user interaction with the button and applies a visual disabled state.

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying button element for DOM manipulation.

      • loading
        boolean
        /
        default: false

        When true, displays a loading indicator and temporarily prevents user interaction while maintaining the button's position in the layout.

      • type
        enum
        /
        default: button

        Specifies the button's HTML type attribute. Use submit for form submission, reset for form reset or button for general interactions.

    • Events

      • onClick

        Event handler called when the button is clicked or activated via keyboard interaction.

Keyboard

  • Enter

    When pressed, activates the button and triggers its onClick event handler.

  • Space

    When pressed, activates the button and triggers its onClick event handler.

made for toddle