Button

A button or a link that looks like a button.

Information

Plan: Personal

Properties

Property	Type	Default
Text	string	"Text"
Link	string	""
ID	string	""
Type	enum<string>	""
Theme	enum<string>	""
Font size	string	"1rem"
Font weight	string	"normal"
Letter spacing	string	"normal"
Color	string	"var(--pc-semantic-text-primary)"
Color - Hover	string	"var(--pc-semantic-text-primary)"
Color - Primary	string	"var(--pc-semantic-text-inverse)"
Color - Primary - Hover	string	"var(--pc-semantic-text-inverse)"
Color - Danger	string	"var(--pc-semantic-text-inverse)"
Color - Danger - Hover	string	"var(--pc-semantic-text-inverse)"
Line height	string	"1.2"
Text align	enum<string>	"inherit"
Text decoration	string	"none"
Text transform	enum<string>	"none"
White space	string	"nowrap"
Background	string	"none"
Background - Hover	string	"none"
Background color	string	"var(--pc-semantic-surface-base)"
Background color - Hover	string	"var(--pc-semantic-surface-base)"
Background - Primary	string	"none"
Background - Primary - Hover	string	"none"
Background - Danger	string	"none"
Background - Danger - Hover	string	"none"
Background color - Primary	string	"var(--pc-semantic-interactive-primary)"
Background color - Primary - Hover	string	"var(--pc-semantic-interactive-primary)"
Background color - Danger	string	"var(--pc-semantic-status-danger)"
Background color - Danger - Hover	string	"var(--pc-semantic-status-danger)"
Background image	string	""
Background size	string	""
Background position	string	""
Background repeat	string	""
Background blend mode	string	""
Opacity	string	"1"
Opacity - Disabled	string	"0.5"
Cursor	string	"pointer"
Cursor - Disabled	string	"default"
Border color	string	"var(--pc-semantic-border-default)"
Border color - Hover	string	"var(--pc-semantic-border-default)"
Border color - Primary	string	"transparent"
Border color - Primary - Hover	string	"transparent"
Border color - Danger	string	"transparent"
Border color - Danger - Hover	string	"transparent"
Border radius	string	"8px"
Border width	string	"1px"
Border top width	string	""
Border right width	string	""
Border bottom width	string	""
Border left width	string	""
Border style	string	"solid"
Box shadow	string	"none"
Box shadow - Hover	string	"var(--pc-semantic-shadow-sm)"
Box shadow - Active	string	"none"
Transform - Hover	string	"translateY(-1px)"
Transform - Active	string	"none"
Text shadow	string	"none"
Text shadow - Hover	string	"none"
Transition	string	"0.25s ease"
Outline	string	"none"
Outline - Focus	string	"2px solid var(--pc-semantic-interactive-primary)"
Backdrop filter	string	"none"
Align items	enum<string>	"center"
Justify content	enum<string>	"center"
Align self	enum<string>	"auto"
Justify self	enum<string>	"auto"
Display	string	"inline-flex"
Flex direction	string	"row"
Flex wrap	string	"nowrap"
Flex grow	string	"0"
Flex shrink	string	"1"
Overflow	enum<string>	"visible"
Position	enum<string>	"relative"
Top	string	"auto"
Right	string	"auto"
Bottom	string	"auto"
Left	string	"auto"
Z-index	string	"auto"
Transform	string	"none"
Transform origin	string	"50% 50% 0"
Margin	string	"0px"
Margin top	string	""
Margin right	string	""
Margin bottom	string	""
Margin left	string	""
Padding	string	"0.6rem 1rem"
Padding top	string	""
Padding right	string	""
Padding bottom	string	""
Padding left	string	""
Gap	string	"0.5rem"
Width	string	"auto"
Minimum width	string	"0px"
Maximum width	string	"none"
Height	string	"auto"
Minimum height	string	"0px"
Maximum height	string	"none"
On click	object	null
Disabled	boolean	false
Target	string	""
Rel	string	""
Is visible	boolean	true
Selectors	array	[]

Variants

Variant	Description
Brushed Metal - Default	Coming soon...
Brushed Metal - Blue	Coming soon...
Brushed Metal - Gold	Coming soon...
Gradient - Themed	Coming soon...
Primary CTA	Coming soon...
Secondary	Coming soon...
Ghost	Coming soon...
Outline	Coming soon...
Danger	Coming soon...
Link	Coming soon...
Soft	Coming soon...
Glass	Coming soon...
Full Width CTA	Coming soon...
Compact	Coming soon...
Icon Button	Coming soon...
Elevated	Coming soon...
Dark - Themed	Coming soon...