{"id":5,"date":"2016-05-06T22:54:11","date_gmt":"2016-05-06T21:54:11","guid":{"rendered":"http:\/\/beta.devon.gov.uk\/styleguide\/?page_id=5"},"modified":"2016-09-23T16:24:11","modified_gmt":"2016-09-23T15:24:11","slug":"buttons","status":"publish","type":"page","link":"https:\/\/www.devon.gov.uk\/standards\/digital-design\/buttons\/","title":{"rendered":"Buttons"},"content":{"rendered":"<h2>Button text<\/h2>\n<p>Button text should be short and describe the action the button performs.<\/p>\n<div class=\"panel\"><a class=\"button\" href=\"#\">Save and continue<\/a><\/div>\n<h2>Action buttons and call to action banners<\/h2>\n<p>Action buttons like &#8216;Start now&#8217; or &#8216;call to action&#8217; banners should include a chevron that points to the right. Buttons that open further content should have a chervron that points downwards.<\/p>\n<div class=\"panel\"><a class=\"button cta\" href=\"#\">Start now<\/a><\/div>\n<h2>Primary and secondary actions<\/h2>\n<p>Primary and secondary action buttons should should have a clear colour distinction. It is preferred that the secondary action buttons use lighter colours. Primary action buttons should appear first.<\/p>\n<div class=\"panel\"><a class=\"button\" href=\"#\">Send my request<\/a><a class=\"button secondary\" href=\"#\">Cancel<\/a><\/div>\n<h2>Button alignment<\/h2>\n<p>To maintain continuety within a site, all buttons that are part of a form, list item or grouping of content should use a standardised alignment (left or right).<\/p>\n<div class=\"panel\"><label for=\"exmaple-1\">Full name<\/label><input id=\"example-1\" type=\"text\" \/><a class=\"button\" href=\"#\">Send my request<\/a><a class=\"button secondary\" href=\"#\">Cancel<\/a><\/div>\n<div class=\"panel\"><label for=\"exmaple-2\">Full name<\/label><input id=\"example-2\" type=\"text\" \/><a class=\"button secondary right\" href=\"#\">Cancel<\/a><a class=\"button right\" href=\"#\">Send my request<\/a><\/div>\n<p>Note: Groups of buttons that offer multiple actions should sit together.<\/p>\n<h2>Button size and spacing<\/h2>\n<p>Sizing and spacing of buttons should take into account touch devices such as mobile phones or tablets. Buttons should be sized and spaced sufficiently to avoid users accidentally pressing incorrect options.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Button text Button text should be short and describe the action the button performs. Save and continue Action buttons and call to action banners Action buttons like &#8216;Start now&#8217; or &#8216;call to action&#8217; banners should include a chevron that points to the right. Buttons that open further content should have a chervron that points downwards. [&hellip;]<\/p>\n","protected":false},"author":945,"featured_media":0,"parent":515,"menu_order":40,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-5","page","type-page","status-publish","hentry"],"acf":[],"publishpress_future_action":{"enabled":false,"date":"2026-05-08 09:01:37","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/users\/945"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":1,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":544,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/5\/revisions\/544"}],"up":[{"embeddable":true,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/515"}],"wp:attachment":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/media?parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}