# `frame-gui-button` Documentation

The `frame-gui-button` is a customizable GUI button component for AFRAME, designed to provide interactive button functionality within VR environments. This guide will help you understand how to implement and customize the `frame-gui-button` in your AFRAME projects.

## Registering the Primitive

`frame-gui-button` is registered as a primitive in AFRAME using the `AFRAME.registerPrimitive` method. This registration includes the default components that make up the button and mappings for various configurable properties.

### Default Components:

- `gui-interactable`: Handles click and hover frame_interactions.
- `gui-item`: Configures general item properties like size and color.
- `gui-button`: Customizes button-specific features.

### Property Mappings:

#### GUI Interactable General
- `key-code`: Key code to trigger click.

#### GUI Item General

- `color-change-animation`: Animation for color change on interaction.
- `width`, `height`, `depth`: Dimensions of the button.
- `base-depth`, `gap`, `radius`, `margin`: Additional spacing and sizing properties.

#### GUI Item BevelBox

- `bevel` and related properties: Configurations for bevel effects.

#### GUI Button Specific

- `on`, `grabbanddroppable`, `value`: Button states and value handling.
- `font-size`, `text-position`, `enable-button-container`: Text styling and positioning.
- `font-family`, `font-color`, `border-color`: Font and border customization.
- `focus-color`, `background-color`, `hover-color`, `active-color`: Color customization for various states.
- `toggle`, `toggle-state`: Toggle behavior configuration.

## Usage Example

Here's a basic example of how to use the `frame-gui-button` in your AFRAME scene:

```html
<frame-gui-button position="0 1.6 -3" value="Click Me!" width="0.75" height="0.4" font-color="#FFF" background-color="#007BFF" hover-color="#0056b3"></frame-gui-button>
```

This example creates a button with the label "Click Me!" that changes color on hover and triggers `myClickFunction` when clicked.

## Customizing Your Button

You can customize the `frame-gui-button` by modifying its properties as per your requirements. Use the property mappings provided above to adjust the button's look, feel, and behavior in your AFRAME scene.