@eightshift/frontend-libs/blocks/init/src/Blocks/components/button/manifest.json

A collection of useful frontend utility modules. powered by Eightshift

{
	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/component.json",
	"componentName": "button",
	"title": "Button",
	"componentClass": "btn",
	"example": {
		"attributes": {
			"buttonContent": "This is a button",
			"buttonUrl": "https://eightshift.com/",
			"buttonId": "custom ID"
		}
	},
	"attributes": {
		"buttonContent": {
			"type": "string"
		},
		"buttonUrl": {
			"type": "string"
		},
		"buttonId": {
			"type": "string"
		},
		"buttonColor": {
			"type": "string",
			"default": "primary500"
		},
		"buttonVariant": {
			"type": "string",
			"default": "fill"
		},
		"buttonIsAnchor": {
			"type": "boolean",
			"default": false
		},
		"buttonIsNewTab": {
			"type": "boolean",
			"default": false
		},
		"buttonAttrs": {
			"type": "array"
		},
		"buttonAriaLabel": {
			"type": "string"
		},
		"buttonUse": {
			"type": "boolean",
			"default": true
		},
		"buttonIconUse": {
			"type": "boolean",
			"default": false
		}
	},
	"components": {
		"icon": "icon"
	},
	"options": {
		"buttonVariant": [
			{
				"label": "Filled",
				"value": "fill",
				"icon": "buttonFilled"
			},
			{
				"label": "Outlined",
				"value": "outline",
				"icon": "buttonOutline"
			},
			{
				"label": "Ghost",
				"value": "ghost",
				"icon": "buttonGhost"
			}
		],
		"buttonColor": [
			"primary500",
			"black",
			"white"
		]
	},
	"variables": {
		"buttonColor": {
			"black": [
				{
					"variable": {
						"button-fill-background-color": "var(--global-colors-black)",
						"button-fill-background-color-hover": "var(--global-colors-primary700)",
						"button-fill-color": "var(--global-colors-white)",
						"button-fill-border-color": "var(--global-colors-black)",
						"button-fill-border-color-hover": "var(--global-colors-primary700)",
						"button-fill-border-color-focus": "transparent",
						"button-outline-color": "var(--global-colors-black)",
						"button-outline-color-hover": "var(--global-colors-primary700)",
						"button-outline-border-color": "var(--global-colors-black)",
						"button-outline-border-color-hover": "var(--global-colors-primary700)",
						"button-outline-border-color-focus": "transparent",
						"button-ghost-color": "var(--global-colors-black)",
						"button-ghost-color-hover": "var(--global-colors-primary700)"
					}
				}
			],
			"white": [
				{
					"variable": {
						"button-fill-background-color": "var(--global-colors-white)",
						"button-fill-background-color-hover": "var(--global-colors-gray100)",
						"button-fill-color": "var(--global-colors-black)",
						"button-fill-border-color": "var(--global-colors-white)",
						"button-fill-border-color-hover": "var(--global-colors-gray100)",
						"button-fill-border-color-focus": "transparent",
						"button-outline-color": "var(--global-colors-white)",
						"button-outline-color-hover": "var(--global-colors-gray100)",
						"button-outline-border-color": "var(--global-colors-white)",
						"button-outline-border-color-hover": "var(--global-colors-gray100)",
						"button-outline-border-color-focus": "transparent",
						"button-ghost-color": "var(--global-colors-white)",
						"button-ghost-color-hover": "var(--global-colors-gray100)"
					}
				}
			]
		},
		"buttonVariant": {
			"fill": [
				{
					"variable": {
						"button-background-color": "var(--button-fill-background-color, var(--global-colors-primary500))",
						"button-background-color-hover": "var(--button-fill-background-color-hover, var(--global-colors-primary700))",
						"button-color": "var(--button-fill-color, var(--global-colors-white))",
						"button-border": "1px solid var(--button-fill-border-color, var(--global-colors-primary500))",
						"button-border-hover": "1px solid var(--button-fill-border-color-hover, var(--global-colors-primary700))",
						"button-border-focus": "1px solid var(--button-fill-border-color-focus, transparent)"
					}
				}
			],
			"outline": [
				{
					"variable": {
						"button-background-color": "transparent",
						"button-color": "var(--button-outline-color, var(--global-colors-primary500))",
						"button-color-hover": "var(--button-outline-color-hover, var(--global-colors-primary700))",
						"button-border": "1px solid var(--button-outline-border-color, var(--global-colors-primary500))",
						"button-border-hover": "1px solid var(--button-outline-border-color-hover, var(--global-colors-primary700))",
						"button-border-focus": "1px solid var(--button-outline-border-color-focus, transparent)"
					}
				}
			],
			"ghost": [
				{
					"variable": {
						"button-background-color": "transparent",
						"button-color": "var(--button-ghost-color, var(--global-colors-primary500))",
						"button-color-hover": "var(--button-ghost-color-hover, var(--global-colors-primary700))",
						"button-border": "1px solid transparent"
					}
				}
			]
		}
	}
}