Button Critical

A button component designed for critical or destructive actions, featuring distinct visual styling to indicate potential serious consequences. Provides clear feedback and supports various interactive states.

Distinct visual styling for destructive actions

Support for loading and disabled states

Architecture

so-button-critical
Slot: default

Reference

  • Button Critical

    The root container 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