Button

The button represents the foundational HTML button, enhanced with a cohesive design theme and additional customizable options.

Example

Below is an example of the button component.

import "spatial-design-system/primitives/ar-button.js";

<a-ar-button
    position="0 1.5 -3"
    content="Button"
    primary="#018A6C"
    textcolor="white"
    size="large"
></a-ar-button>

Props

Property	Type	Default	Description
visible	boolean	true	Controls the button's visibility. When true, the button is visible; when false, it is hidden.
size	enum (small, medium, large)	medium	Sets the button's size, adjusting padding, font size, and layout compactness accordingly.
position	number[]	0 0 0	Specifies the button's position.
primary	string (blue, #fff)	#00BA92	Defines the primary color of the button (affecting text, background, icon background).
text	string	""	Sets the button's label text, such as "Open dialog" or "Close".
textcolor	string	black	Specifies the color of the button's text.
uppercase	boolean	false	When true, displays the button text in uppercase letters.
rounded	boolean	false	When true, gives the button rounded corners.
textonly	boolean	false	When true, renders the button as a text-only button with no background.
outline	boolean	false	When true, displays the button with an outline.
variant	string (light, dark)	""	Sets the button's color scheme mode, either "light" or "dark," for visual theme consistency.