{"id":1062,"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-04-26T19:38:49","modified_gmt":"2024-04-26T19:38:49","slug":"button","status":"publish","type":"page","link":"https:\/\/digitaldocumentation.wustl.edu\/equity\/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 small 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 small outline<\/a><\/div>\n<\/div>\n\n\n\n<p>The&nbsp;<strong>primary small style<\/strong>&nbsp;should 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-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\"><a class=\"wp-block-button__link wp-element-button\">Primary style<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-button-outline\"><a class=\"wp-block-button__link wp-element-button\">Outline style<\/a><\/div>\n<\/div>\n\n\n\n<p>The&nbsp;<strong>primary style<\/strong>&nbsp;is a larger version of the primary small style. This button style should be reserved for instances when you need to strongly emphasize an important action the visitor should take. <\/p>\n\n\n\n<p>There are very few areas of the site when this larger button would be necessary.<\/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<ul>\n<li>Add a button block.<\/li>\n\n\n\n<li>Choose the justification and orientation, if applicable or 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<\/ul>\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 - Equity<\/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 - Equity\" \/>\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\/equity\/blocks\/button\/\" \/>\n<meta property=\"og:site_name\" content=\"Equity\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-26T19:38:49+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\/equity\/blocks\/button\/\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/button\/\",\"name\":\"Buttons - Equity\",\"isPartOf\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website\"},\"datePublished\":\"2022-06-23T21:52:26+00:00\",\"dateModified\":\"2024-04-26T19:38:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/button\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/button\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/button\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocks\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Buttons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/\",\"name\":\"Equity\",\"description\":\"Just another digitaldocumentation.wustl.edu Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Buttons - Equity","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 - Equity","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\/equity\/blocks\/button\/","og_site_name":"Equity","article_modified_time":"2024-04-26T19:38:49+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\/equity\/blocks\/button\/","url":"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/button\/","name":"Buttons - Equity","isPartOf":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website"},"datePublished":"2022-06-23T21:52:26+00:00","dateModified":"2024-04-26T19:38:49+00:00","breadcrumb":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/button\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitaldocumentation.wustl.edu\/equity\/"},{"@type":"ListItem","position":2,"name":"Blocks","item":"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/"},{"@type":"ListItem","position":3,"name":"Buttons"}]},{"@type":"WebSite","@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website","url":"https:\/\/digitaldocumentation.wustl.edu\/equity\/","name":"Equity","description":"Just another digitaldocumentation.wustl.edu Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitaldocumentation.wustl.edu\/equity\/?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":"Equity","distributor_original_site_url":"https:\/\/digitaldocumentation.wustl.edu\/equity","push-errors":false,"_links":{"self":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/1062"}],"collection":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/comments?post=1062"}],"version-history":[{"count":1,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/1062\/revisions"}],"predecessor-version":[{"id":1063,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/1062\/revisions\/1063"}],"up":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/567"}],"wp:attachment":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/media?parent=1062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}