Button Primary

A button component designed for primary actions, featuring distinct visual styling to indicate importance. Designed to stand out as the main call-to-action, it provides clear feedback and supports various interactive states including loading and disabled conditions.

Distinct visual styling for primary actions

Support for loading and disabled states

Architecture

so-button-primary
Slot: default

Reference

  • Button Primary

    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