Styling the Alert control’s nested buttons

The following example shows how you can customize the appearance of the buttons in an Alert control in Flex by setting the buttonStyleName style.

Full code after the jump.


<?xml version="1.0" encoding="utf-8"?>
<!-- -->
<mx:Application xmlns:mx=""

        @font-face {
            src: local("Comic Sans MS");
            fontFamily: myComicSansMS;
            fontWeight: normal;

        Alert {
            buttonStyleName: myCustomButtonStyleName;

        .myCustomButtonStyleName {
            color: red;
            cornerRadius: 12;
            fontFamily: myComicSansMS;
            fontSize: 10;
            fontWeight: normal;
            textDecoration: underline;
            themeColor: red;

            import mx.controls.Alert;

            private var alert:Alert;

            private function init():void {
                var myMessage:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\\nDonec tincidunt sollicitudin sem.";
                var myTitle:String = "The quick brown fox jumped over the lazy dog";
                alert =, myTitle);

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Launch alert" click="init();" />


View source is enabled in the following example.

0 thoughts on “Styling the Alert control’s nested buttons

  1. dormouse,

    Good catch!
    Looks like a copy/paste error. I just copied a previous entry, tweaked some styles and try and pass it off as a new, unique entry.

    I’ll try and clean that up when I recreate the SWF files from home.