{"id":8187,"date":"2019-11-12T16:04:21","date_gmt":"2019-11-12T21:04:21","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=8187"},"modified":"2025-11-18T09:38:22","modified_gmt":"2025-11-18T14:38:22","slug":"buttons","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/buttons\/","title":{"rendered":"Buttons"},"content":{"rendered":"

Large Buttons<\/h2>\nSimple<\/a>\nPrimary<\/a>\nSuccess<\/a>\nInformation<\/a>\nWarning<\/a>\nDanger<\/a>\nLink<\/a>\n

Small Buttons<\/h2>\nSimple<\/a>\nPrimary<\/a>\nSuccess<\/a>\nInformation<\/a>\nWarning<\/a>\nDanger<\/a>\nLink<\/a>\n

Extra Small Buttons<\/h2>\nSimple<\/a>\nPrimary<\/a>\nSuccess<\/a>\nInformation<\/a>\nWarning<\/a>\nDanger<\/a>\nLink<\/a>\n

Buttons With Icons<\/h2>\n

There are a number of icons that can be added to a button.<\/p>\n<\/i> Donate<\/a>\n<\/i> Our Location<\/a>\n<\/i> Appointments<\/a>\n

Full Width Buttons<\/h2>\n

Create block level buttons\u2014those that span the full width of it’s containing element\u2014by selecting the make block<\/strong> option.<\/p>\nDefault<\/a>\nPrimary<\/a>\nSuccess<\/a>\nInformation<\/a>\nWarning<\/a>\nDanger<\/a>\nLink<\/a>\n

\n

How to Add a Button<\/h2>\n
    \n
  1. Place your cursor in the location where you wish to add the button.<\/li>\n
  2. Select Button<\/strong> from the Content Elements dropdown menu<\/strong>, under Basic Elements<\/strong>.
    \n\"\"<\/li>\n
  3. Tip<\/strong>: If you don\u2019t see the\u00a0Content Elements<\/strong>\u00a0button in the editor, click the\u00a0Toolbar Toggle<\/strong> button. This toggles the visibility of\u00a0a collection of buttons in the editor.
    \n\"Toolbar<\/li>\n
  4. A dialog box will appear that allows you to style your button.\n