[SalesForce] To display a prompt notification (Lightning design system)

The input field takes in a name and on the click of the 'submit' button, it saves this new account name.
But if the input field is empty, then the program should display a prompt which says "error"
I am entering the name and the name is getting saved in the account . but how do i check if the field is empty and if it is empty, how to display the prompt?
This is my code:

Component :

      <aura:attribute name="newAccount" type="Account"
         default="{ 'sobjectType': 'Account',
                         'Name': '',
                       }"/>




    <div>
        <form>
              <ui:inputText aura:id="AccountName" label="New Account Name"
                        class="slds-input"
                        labelClass="slds-form-element__label"
                        value="{!v.newAccount.Name}"
                        required="true"/>
             <ui:button label="Submit" 
                       class="slds-button slds-button--neutral"
                       labelClass="label"
                       press="{!c.createAccount}"/>
    <div id="prompt">        
     <div role="alertdialog" tabindex="-1" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-wrapper" class="slds-modal slds-fade-in-open slds-modal--prompt">
      <div class="slds-modal__container">
        <div class="slds-modal__header slds-theme--error slds-theme--alert-texture">
          <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
            <span class="slds-assistive-text">Close</span>
           </button>
          <h2 class="slds-text-heading--medium" id="prompt-heading-id">Error</h2>
        </div>
        <div class="slds-modal__content slds-p-around--medium">
            <p> Then input field cannot be empty </p>
        </div>
         <div class="slds-modal__footer slds-theme--default">
          <button class="slds-button slds-button--neutral">Okay</button>
          </div>
      </div>
    </div>
    </div>    
    <div class="slds-backdrop slds-backdrop--open"></div>
        </form>
        </div>
    </aura:component>

Javascript controller:

({
         createAccount : function(component, event) 
           {
               var newAcc = component.get("v.newAccount");
            var action = component.get("c.saveAccount");
            action.setParams(
                  { 
                "acc": newAcc
                  });
            action.setCallback(this, function(a)
               {
                  var state = a.getState();
                if (state === "SUCCESS") 
                   {
                       var name = a.getReturnValue();
                      alert("hello from here"+name);
                }
                        });
          $A.enqueueAction(action)
    }
    }) 

Apex controller(Server side):

public with sharing class promtserv
  {
@AuraEnabled
    public static Account saveAccount (Account acc) {

    upsert acc;
    return acc;
    }
  }

Also, should i include anything in the svg class? if yes what and how?