Buttons

|

Lukáš Moravec
1–2 minutes
186 words

Button or group of buttons are meant to prompt most of the action in UI

Button examples
  • There are two default button styles: Default and Outline
  • Button groups can be justified left, center, right or spaced between
  • Buttons width can be set to 25%, 50%, 75%, 100%
  • Keep labels short and use sentence case

Block example

Primary
Secondary
Tertiary

theme.json

Buttons

  • core/buttons
CategoryConfiguration
Colorbackground: Available
gradient: Available
text: —
TypographyfontSize: Available
lineHeight: Available
Spacingpadding: Available
margin: Available
blockGap: Available
Borderborder: Available
radius: Available
Filterduotone: —
Shadow—
CssAvailable

Json example

"core/buttons": {
    "spacing": {
        "blockGap": {
            "left": "var(--wp--preset--spacing--small)",
            "top": "var(--wp--preset--spacing--small)"
        }
    }
}

Button

  • core/button
CategoryConfiguration
Colorbackground: Available
graduent: Available
text: Available
TypographyfontSize: Available
lineHeight: Available
Spacingpadding: Available
margin: Available
blockGap: Available
Borderborder: Available
radius: Available
Filterduotone: —
ShadowAvailable
CssAvailable

Json example

"core/button": {
    "border": {
        "radius": {
            "bottomLeft": "var(--wp--preset--border-radius--extra-large)",
            "bottomRight": "var(--wp--preset--border-radius--extra-large)",
            "topLeft": "var(--wp--preset--border-radius--extra-large)",
            "topRight": "var(--wp--preset--border-radius--extra-large)"
        }
    },
    "css": "user-select: none;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nmin-height: var(--wp--custom--medium-height);\ntransition: opacity var(--wp--custom--transition-normal); \n&:hover { opacity: 0.8; } \n&:active { opacity: 0.6 }",
    "spacing": {
        "padding": {
            "left": "var(--wp--preset--spacing--extra-large)",
            "right": "var(--wp--preset--spacing--extra-large)"
        }
    },
    "typography": {
        "lineHeight": "1"
    }
}

Recent articles