{"id":1160,"date":"2022-06-23T21:52:26","date_gmt":"2022-06-23T21:52:26","guid":{"rendered":"https:\/\/digitaldocumentation.wustl.edu\/doc-central\/?page_id=664"},"modified":"2024-09-23T16:33:39","modified_gmt":"2024-09-23T16:33:39","slug":"button","status":"publish","type":"page","link":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/","title":{"rendered":"Buttons"},"content":{"rendered":"\n<p class=\"is-style-lead\">A button acts as a highly visible link, making it ideal for important actions like applications or registrations. You can add buttons to body text, or insert them into graphical blocks like callouts.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Button Usage<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Links vs. Buttons<\/strong><\/h3>\n\n\n\n<ul>\n<li>Links are typically used when navigating to another place, such as: \u201cview all,\u201d \u201cbrowse regional networks,\u201d \u201cexplore volunteer opportunities,\u201d etc.&nbsp;<\/li>\n\n\n\n<li>Buttons are used when you are performing an action, such as: \u201csubmit,\u201d \u201csearch,\u201d \u201ccreate new,\u201d \u201cupload,\u201d etc.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Button styles<\/h3>\n\n\n\n<p>While counterintuitive, the order in which the button styles display in the block sidebar is opposite of how often you\u2019ll be likely to use each style.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-text-arrow\"><a class=\"wp-block-button__link wp-element-button\">Text with arrow style<\/a><\/div>\n<\/div>\n\n\n\n<p>The&nbsp;<strong>text with arrow style<\/strong>, while technically a button, is intended for use as a link, as in the link examples described above. Use the text with arrow style when you are linking to another page or website and wish for the link to stand apart from the adjacent paragraph text.&nbsp;<\/p>\n\n\n\n<p>This style is used most often.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-primary-small\"><a class=\"wp-block-button__link wp-element-button\">Primary style<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline-small\"><a class=\"wp-block-button__link wp-element-button\">Primary outline<\/a><\/div>\n<\/div>\n\n\n\n<p>The\u00a0<strong>primary style<\/strong>\u00a0should be used when you want the visitor to perform an action, such as the button examples described above. However, some specific areas of the site show this style applied to links, in order to give them greater visual emphasis. For example, this button style is part of the Call to Action block\/section and some areas of the homepages.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">How to use the button block<\/h2>\n\n\n\n<ol>\n<li>In the Page Editor, navigate to the area of the page where you want the block to display.<\/li>\n\n\n\n<li>Click on the Add block icon [+] and select\/search for&nbsp;<strong>Buttons<\/strong>&nbsp;from the menu.<\/li>\n\n\n\n<li>Choose the alignment and orientation, if applicable or if adding more than one button. (Buttons should typically be left justified as they are by default)<\/li>\n\n\n\n<li>Click on the button to add button text.<\/li>\n\n\n\n<li>In the floating editor bar, click on the link icon to add the url to the button. If you\u2019re linking to a page or post within your site, simply type in the title and select the page or post from the list. (Internal site content must be published&nbsp;<em>before<\/em>&nbsp;you can link to it.)<\/li>\n\n\n\n<li>Adjust button style in the right column editor.<\/li>\n\n\n\n<li>Click update in the page editor to save your changes.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><img decoding=\"async\" src=\"https:\/\/webtheme.wustl.edu\/wp-content\/uploads\/2018\/07\/pro-tip-icon2.png\" alt=\"\">Pro Tip<\/h4>\n\n\n\n<p>Start button text with a verb to motivate your site visitors to take action.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A button acts as a highly visible link, making it ideal for important actions like applications or registrations. You can add buttons to body text, or insert them into graphical blocks like callouts. Button Usage Links vs. Buttons Button styles While counterintuitive, the order in which the button styles display in the block sidebar is [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":567,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.14 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Buttons - Student Affairs Units<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Buttons - Student Affairs Units\" \/>\n<meta property=\"og:description\" content=\"A button acts as a highly visible link, making it ideal for important actions like applications or registrations. You can add buttons to body text, or insert them into graphical blocks like callouts. Button Usage Links vs. Buttons Button styles While counterintuitive, the order in which the button styles display in the block sidebar is [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/\" \/>\n<meta property=\"og:site_name\" content=\"Student Affairs Units\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-23T16:33:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtheme.wustl.edu\/wp-content\/uploads\/2018\/07\/pro-tip-icon2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/\",\"name\":\"Buttons - Student Affairs Units\",\"isPartOf\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/#website\"},\"datePublished\":\"2022-06-23T21:52:26+00:00\",\"dateModified\":\"2024-09-23T16:33:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocks\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Buttons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/#website\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/\",\"name\":\"Student Affairs Units\",\"description\":\"Just another digitaldocumentation.wustl.edu Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Buttons - Student Affairs Units","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Buttons - Student Affairs Units","og_description":"A button acts as a highly visible link, making it ideal for important actions like applications or registrations. You can add buttons to body text, or insert them into graphical blocks like callouts. Button Usage Links vs. Buttons Button styles While counterintuitive, the order in which the button styles display in the block sidebar is [&hellip;]","og_url":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/","og_site_name":"Student Affairs Units","article_modified_time":"2024-09-23T16:33:39+00:00","og_image":[{"url":"https:\/\/webtheme.wustl.edu\/wp-content\/uploads\/2018\/07\/pro-tip-icon2.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/","url":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/","name":"Buttons - Student Affairs Units","isPartOf":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/#website"},"datePublished":"2022-06-23T21:52:26+00:00","dateModified":"2024-09-23T16:33:39+00:00","breadcrumb":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/"},{"@type":"ListItem","position":2,"name":"Blocks","item":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/blocks\/"},{"@type":"ListItem","position":3,"name":"Buttons"}]},{"@type":"WebSite","@id":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/#website","url":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/","name":"Student Affairs Units","description":"Just another digitaldocumentation.wustl.edu Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Student Affairs Units","distributor_original_site_url":"https:\/\/digitaldocumentation.wustl.edu\/sa-units","push-errors":false,"_links":{"self":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/wp-json\/wp\/v2\/pages\/1160"}],"collection":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/wp-json\/wp\/v2\/comments?post=1160"}],"version-history":[{"count":5,"href":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/wp-json\/wp\/v2\/pages\/1160\/revisions"}],"predecessor-version":[{"id":1191,"href":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/wp-json\/wp\/v2\/pages\/1160\/revisions\/1191"}],"up":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/wp-json\/wp\/v2\/pages\/567"}],"wp:attachment":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/sa-units\/wp-json\/wp\/v2\/media?parent=1160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}