XML / Button Button is a complex element that allows drawing automatically animated text and textures when clicked , and with special event handling . Is a managed combination of Textures and FontStrings and is placed in a Frames element . Inheritance . Inherited by : CheckButton , UnitButton , Inherits : Frame , Defined in : Frames , Ui Runtime object : UIObject Button Summary . Example . This example will show a opaque color texture , painted white , and a button where the normal state font have been changed to a large font . Details . States . Button is one of the most complex and confusing types , and probably the most important from a UI perspective for user interaction . Each button has ' states ' where each state depends on mouse interaction in order to give feedback to the user about what it being or going to be clicked on . ' Normal ' state is the button at rest and how its normally drawn . ' Highlight ' is the state when a user hovers over the button with the mouse . ' Pushed ' is the state when the mouse button is held down . And ' Disabled ' is the state where a button shows its disabled and cannot be clicked . Settings defined for the ' Normal ' state will be used for other states if those states settings aren ' t set . Fonts . The font ' s overall text style is defined by a series of ' overriding ' properties . Each state ' s ' style ' can use a different Font or FontString template . And the state ' s ' Color ' if set , overrides the color in the state ' s style template . Setting ' ButtonText ' definies a singular explicit FontString for the Button , which overrides any button state options set in the Button ' s state properties . Setting a ' XxxxFont ' element is then effectively defining a default set of attributes for ButtonText when the button is in a particular state . For example , if ButtonText is defined and sets a ' FontHeight ' , it will override a NormalFont ' FontHeight ' . If there is no ButtonText , then the values used to fabricate a FontString for display , come purely from ' text ' attribute and the ' XxxxFont ' elements . This overall ' Button > ButtonText > Switchabe . . . Font ' arrangement allows a Button to use predefined but flexible text and font constructs , and to automatically switch visual states with no further work . Text . If both Button ' text ' and the Button ' s ButtonText ' text ' are set , then Button ' text ' will override text set in ButtonText . Oddly however , if Button ' text ' is set to " " , Button . text will not override , which can be frustrating . Additionally , the text is automatically offset three unscaled pixels lower than normal , for an aligned FontString . This makes most capitol case button text look centered vertically in such a tight space , effectively ignoring font ' underhang ' in centering . Textures . The various textures , once inherited or set to the art of your choice , will automatically behave as expect . ( highlight on mouseover , pushed while clicked , disabled when disabled ) The same goes for the different texts . Inheritance . Basically ' ButtonText ' is a FontString which is optional , and which dynamically inherits from a button state ' Font ' template , depending on which state the button is in , and . . . the state color overrides everything else for the font color . An odd quirk is that the ButtonText property can use ' inherits ' itself , however this will be ignored if a style is set . Effectively ButtonText will inherit , on the fly , from one of the button state styles if defined , replacing the ' inherits ' attribute . For the ' text ' attribute , and to reiterate from before , the ButtonText text is overriden by the Button text attribute . For ' texture ' each state is independent , and there is no means for inheritance from any other element . Layers and Render Order . Button ' s normal Text and Texture are like implicit Layer Frames . Button Text is rendered as a FontString , and the Button texture as a Texture . Both following the same rules as explicit defined layer frames . They rendered before any other explicit layer frames at a particular layer . The Button text ' FontString ' is rendered at DrawLayer of ' Overlay ' . The Button texure is rendered at the DrawLayer of ' Artwork ' . Thus , if you added an explicit Texture to the Artwork layer of a Button , it would get rendered on top of the state texture , but under the button text . Example . < Button name = " $ parentButtonClose " inherits = " OptionsButtonTemplate " text = " Close " >