CodeMeltedDEV
    Preparing search index...

    Class CButton

    <cm-button> Web Component Documentation

    A highly flexible, accessible custom button element that perfectly aligns text and media (emojis or images) horizontally or vertically.

    LAYOUT CONFIGURATIONS

    By default, the button places media on the LEFT and text on the RIGHT. To change this, pass the "layout" attribute:

    1. Default (Side-by-Side):
    <cm-button label="Launch" icon="🚀" tooltip="We are launching today">
    </cm-button>
    1. Stacked (Media Top, Text Bottom):
    <cm-button
      label="Launch"
      icon="icon.png"
      tooltip="We are launching today"
      layout="stacked">
    </cm-button>

    EXPOSED CSS VARIABLES (THEMING)

    Override these properties using inline styles or an external stylesheet:

    Layout & Spacing:

    • --padding : Internal padding of the button (Default: 10px 20px)
    • --gap : Spacing between the media and text (Default: 8px)
    • --border-radius : Roundness of the button corners (Default: 4px)
    • --border : Button border style (Default: 1px solid #ccc)

    Typography:

    • --font-size : Text size (Default: 16px)
    • --font-weight : Font weight/thickness (Default: 500)

    Color States:

    • --bg-color : Normal background color (Default: #f0f0f0)
    • --hover-bg-color : Background color on hover (Default: #e0e0e0)
    • --color : Normal text color (Default: #333333)
    • --hover-color : Text color on hover (Default: #000000)

    Example:

    cm-button {
      --border: none;
    }

    ACCESSIBILITY & EVENTS

    • Standard native "click" events automatically bubble up to this component.
    • Built-in Keyboard Accessibility allows users to focus the button using the "Tab" key and trigger it using "Enter" or "Space".

    Hierarchy (View Summary)

    Index
    constructor
    title
    observedAttributes
    adoptedCallback attributeChangedCallback connectedCallback connectedMoveCallback disconnectedCallback get_attribute has_attribute refresh set_attribute register_component

    • Parameters

      • Optionalparams: {
            click_handler?: CEventHandler;
            icon?: string;
            label?: string;
            tooltip?: string;
        } = {}

      Returns CButton

    title: string
    • get observedAttributes(): string[]

      Returns string[]

    • Called when attributes are changed, added, removed, or replaced.

      Parameters

      • name: string

        The name of a observedAttributes allowing access into the internals of the custom component.

      • old_value: string

        The original value held by the attribute.

      • new_value: string

        The new value to apply.

      Returns void

    • Called each time the element is added to the document. The specification recommends that, as far as possible, developers should implement custom element setup in this callback rather than the constructor.

      Returns void

    • When defined, this is called instead of connectedCallback() and disconnectedCallback() each time the element is moved to a different place in the DOM via Element.moveBefore(). Use this to avoid running initialization/cleanup code in the connectedCallback() and disconnectedCallback() callbacks when the element is not actually being added to or removed from the DOM. See Lifecycle callbacks and state-preserving moves for more details.

      Returns void

    • The get_attribute() method of the Element interface returns the string value of the specified attribute of the specified element. It returns null if the element doesn't have an attribute with the given name.

      Parameters

      • name: string

        A string specifying the name of the attribute. When called on an HTML element in a DOM flagged as an HTML document, the name is normalized to lowercase.

      Returns string | null

      A string containing the attribute's value, or null if the element doesn't have an attribute with the given name.

    • The set_attribute() method of the Element interface sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

      Parameters

      • name: string

        A string containing the qualified name of the attribute whose value is to be set. The attribute name is automatically converted to all lower-case when set_attribute() is called on an HTML element in an HTML document.

      • value: string

        A trusted type or string containing the value to assign to the attribute.

      Returns void

    • Utility function to register a custom component if it has not already been defined.

      Parameters

      • name: string

        The name of the component.

      • element_def: any

        The constructor definition.

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods