Button

A versatile button component that provides interactive functionality across the interface. Implements proper ARIA attributes for accessibility and seamlessly integrates with other Spark Core components, functioning as both a trigger and close button while maintaining consistent behavior patterns.

Automatically acts as trigger button

Automatically acts as a close button

Example

Architecture

sc-button
Slot: default

Reference

  • Button

    The button component handles user interactions. Automatically receives appropriate ARIA attributes and behavior when used within other Spark Core components.

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

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the button.

      • direction
        enum
        /
        default: ltr

        The reading direction of the button content. Affects the layout and positioning of content within the button.

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with the button.

      • id
        string
        /
        default: -

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

      • type
        string
        /
        default: button

        Specifies the type of button. Common values include button, submit and reset when used within forms.

    • Events

      • onClick

        Event handler called when the button is clicked or activated via keyboard interaction (Space or Enter).

    • Classes

      • disabled

        Applied when the button is in a disabled state.

      • trigger-open

        Applied when the button is being used as a trigger and its associated content is in an open state.

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