# GuidelineDesignSettingsButtonStyle

> Type in domain **Guidelines**

- HTML: [GuidelineDesignSettingsButtonStyle.html](GuidelineDesignSettingsButtonStyle.html)
- Raw SDL: [GuidelineDesignSettingsButtonStyle.sdl](GuidelineDesignSettingsButtonStyle.sdl)
- Covered by: [llms.txt](../llms.txt)

## Fields

- `key`: `String!` _(beta)_ — The button style key, e.g.: "primary"
- `fontFamily`: `GuidelineDesignSettingsTypeStyleFontFamily` _(beta)_ — The font family
- `fontSize`: `String!` _(beta)_ — The size of the font, e.g.: "12px", "24pt", "2em". Supported units: px, pt, pc, in, mm, cm, em, rem, %, vw, vh
- `fontWeight`: `String!` _(beta)_ — The weight of the font, e.g. "100", "200", "300", "400", "500", "600", "700", "800", "900"
- `lineHeight`: `String!` _(beta)_ — Line height
- `paddingTop`: `String!` _(beta)_ — The top padding, e.g. "10px". Supported units: "px", "pt", "pc", "in", "mm", "cm", "em", "rem", "%", "vw", "vh"
- `paddingRight`: `String!` _(beta)_ — The right padding, e.g. "10px". Supported units: "px", "pt", "pc", "in", "mm", "cm", "em", "rem", "%", "vw", "vh"
- `paddingBottom`: `String!` _(beta)_ — The bottom padding, e.g. "10px". Supported units: "px", "pt", "pc", "in", "mm", "cm", "em", "rem", "%", "vw", "vh"
- `paddingLeft`: `String!` _(beta)_ — The left padding, e.g. "10px". Supported units: "px", "pt", "pc", "in", "mm", "cm", "em", "rem", "%", "vw", "vh"
- `cornerRadius`: `String!` _(beta)_ — The corner radius, e.g.: "10px". Supported units: "px", "pt", "pc", "em", "rem", "%"
- `borderWidth`: `String!` _(beta)_ — The width of the border, e.g.: "2px". Supported units: "px"
- `isUppercase`: `Boolean!` _(beta)_ — Whether the button text is uppercase
- `isItalic`: `Boolean!` _(beta)_ — Whether the button text is italic
- `defaultTextColors`: `[GuidelineDesignSettingsTypeStyleTextColor]!` _(beta)_ — The text colors in the default state
- `defaultBackgroundColors`: `[GuidelineDesignSettingsTypeStyleTextColor]!` _(beta)_ — The background colors in the default state
- `defaultBorderColors`: `[GuidelineDesignSettingsTypeStyleTextColor]!` _(beta)_ — The border colors in the default state
- `hoverTextColors`: `[GuidelineDesignSettingsTypeStyleTextColor]!` _(beta)_ — The text colors in the hover state
- `hoverBackgroundColors`: `[GuidelineDesignSettingsTypeStyleTextColor]!` _(beta)_ — The background colors in the hover state
- `hoverBorderColors`: `[GuidelineDesignSettingsTypeStyleTextColor]!` _(beta)_ — The border colors in the hover state

## Related mutations

- [`updateGuidelineDesignSettingsButtonStyle`](../mutation/updateGuidelineDesignSettingsButtonStyle.md)
- [`updateGuidelineDesignSettingsButtonStyleColor`](../mutation/updateGuidelineDesignSettingsButtonStyleColor.md)

## Reach via

Example queries that can return this type from the root `Query`.

### `brand › guidelines › designSettings › buttonStyles`

```graphql
query BrandGuidelinesDesignSettingsButtonStyles {
  brand(id: "…") {
    guidelines(limit: 25, page: 1) {
      items {
        designSettings {
          buttonStyles {
            __typename
            borderWidth
            cornerRadius
            defaultBackgroundColors {
              color
              colorSchemeId
              isDefault
            }
            defaultBorderColors {
              color
              colorSchemeId
              isDefault
            }
            defaultTextColors {
              color
              colorSchemeId
              isDefault
            }
            fontFamily {
              name
              provider
            }
            fontSize
            fontWeight
            hoverBackgroundColors {
              color
              colorSchemeId
              isDefault
            }
            hoverBorderColors {
              color
              colorSchemeId
              isDefault
            }
            hoverTextColors {
              color
              colorSchemeId
              isDefault
            }
            isItalic
            isUppercase
            key
            lineHeight
            paddingBottom
            paddingLeft
            paddingRight
            paddingTop
          }
        }
      }
    }
  }
}
```

Raw: [`BrandGuidelinesDesignSettingsButtonStyles.sdl`](../examples/BrandGuidelinesDesignSettingsButtonStyles.sdl)

### `brands › guidelines › designSettings › buttonStyles`

```graphql
query BrandsGuidelinesDesignSettingsButtonStyles {
  brands {
    guidelines(limit: 25, page: 1) {
      items {
        designSettings {
          buttonStyles {
            __typename
            borderWidth
            cornerRadius
            defaultBackgroundColors {
              color
              colorSchemeId
              isDefault
            }
            defaultBorderColors {
              color
              colorSchemeId
              isDefault
            }
            defaultTextColors {
              color
              colorSchemeId
              isDefault
            }
            fontFamily {
              name
              provider
            }
            fontSize
            fontWeight
            hoverBackgroundColors {
              color
              colorSchemeId
              isDefault
            }
            hoverBorderColors {
              color
              colorSchemeId
              isDefault
            }
            hoverTextColors {
              color
              colorSchemeId
              isDefault
            }
            isItalic
            isUppercase
            key
            lineHeight
            paddingBottom
            paddingLeft
            paddingRight
            paddingTop
          }
        }
      }
    }
  }
}
```

Raw: [`BrandsGuidelinesDesignSettingsButtonStyles.sdl`](../examples/BrandsGuidelinesDesignSettingsButtonStyles.sdl)