{"record":{"id":"4b3e80a743bcef55","repo":"angular/components","slug":"unsupported-matbutton-appearance-appearance","errorCode":null,"errorMessage":"Unsupported MatButton appearance \"${appearance}\"","messagePattern":"Unsupported MatButton appearance \"(.+?)\"","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/button/button.ts","lineNumber":79,"sourceCode":"    // cause the fallback appearance's classes to be set and then immediately replaced when\n    // the input value is assigned.\n    if (inferredAppearance) {\n      this.setAppearance(inferredAppearance);\n    }\n  }\n\n  /** Programmatically sets the appearance of the button. */\n  setAppearance(appearance: MatButtonAppearance): void {\n    if (appearance === this._appearance) {\n      return;\n    }\n\n    const classList = this._elementRef.nativeElement.classList;\n    const previousClasses = this._appearance ? APPEARANCE_CLASSES.get(this._appearance) : null;\n    const newClasses = APPEARANCE_CLASSES.get(appearance)!;\n\n    if ((typeof ngDevMode === 'undefined' || ngDevMode) && !newClasses) {\n      throw new Error(`Unsupported MatButton appearance \"${appearance}\"`);\n    }\n\n    if (previousClasses) {\n      classList.remove(...previousClasses);\n    }\n\n    classList.add(...newClasses);\n    this._appearance = appearance;\n  }\n}\n\n/** Infers the button's appearance from its static attributes. */\nfunction _inferAppearance(button: HTMLElement): MatButtonAppearance | null {\n  if (button.hasAttribute('mat-raised-button')) {\n    return 'elevated';\n  }\n\n  if (button.hasAttribute('mat-stroked-button')) {","sourceCodeStart":61,"sourceCodeEnd":97,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/button/button.ts#L61-L97","documentation":"MatButton (and its variants like MatIconButton/MatFab) validates the appearance input against a known set of appearances with associated CSS classes. This dev-mode error is thrown when setAppearance receives a value not in APPEARANCE_CLASSES, i.e. an unsupported appearance string.","triggerScenarios":"Setting the appearance input to an invalid value, e.g. <button mat-button appearance=\"outline\"> (typo for 'outlined'), or binding appearance programmatically to a wrong string like 'filled' on a variant that doesn't support it.","commonSituations":"Copy-pasting appearance names between libraries (e.g. 'outline' from other UI kits); typos ('outln', 'text ' with space); migrating between Material versions where valid appearance values changed.","solutions":["Use a supported appearance value: 'text', 'filled', 'elevated', 'outlined', or 'tonal'","Fix typos in the appearance attribute or binding","Check the MatButtonAppearance type and rely on TypeScript strictTemplates to catch invalid values at compile time"],"exampleFix":"// before\n<button mat-button appearance=\"outline\">Save</button>\n// after\n<button mat-button appearance=\"outlined\">Save</button>","handlingStrategy":"validation","validationCode":"const VALID = ['text','filled','elevated','outlined','tonal'] as const;\nif (!VALID.includes(appearance as any)) {\n  throw new TypeError(`appearance must be one of ${VALID.join(', ')}`);\n}","typeGuard":"type MatButtonAppearance = 'text'|'filled'|'elevated'|'outlined'|'tonal';\nfunction isAppearance(v: string): v is MatButtonAppearance {\n  return ['text','filled','elevated','outlined','tonal'].includes(v);\n}","tryCatchPattern":"// Bind via typed input so runtime throw surfaces in dev; or guard before set:\nif (isAppearance(userAppearance)) { btn.appearance = userAppearance; }\nelse { console.error('Unsupported appearance', userAppearance); }","preventionTips":["Use strictTemplates so invalid string literals fail at compile time","Only use the documented appearances: text, filled, elevated, outlined, tonal","Centralize appearance constants instead of inline strings"],"tags":["angular","material","button","input-validation","dev-mode","typo"],"backgroundTag":"invalid-enum-value","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}