{"id":5156,"date":"2023-05-19T14:15:12","date_gmt":"2023-05-19T05:15:12","guid":{"rendered":"https:\/\/full-site-patterner.com\/en\/?p=5156"},"modified":"2023-05-31T09:54:08","modified_gmt":"2023-05-31T00:54:08","slug":"block-patternbutton-dropdown","status":"publish","type":"post","link":"https:\/\/full-site-patterner.com\/en\/block-pattern\/design-pattern\/5156\/","title":{"rendered":"Block pattern(button\u2026"},"content":{"rendered":"\n<p>\u30b3\u30f3\u30c6\u30f3\u30c4\u30a8\u30ea\u30a2\u3084\u30d5\u30c3\u30bf\u30fc\u306a\u3069\u306b\u914d\u7f6e\u3067\u304d\u308b\u30d1\u30fc\u30c4\u3082\u3001\u30d6\u30ed\u30c3\u30af\u30d1\u30bf\u30fc\u30f3\u3067\u5404\u7a2e\u3054\u7528\u610f\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-group row is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-primary<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-primary\"><a class=\"wp-block-button__link wp-element-button\">btn-primary<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-secondary<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-secondary\"><a class=\"wp-block-button__link wp-element-button\">btn-secondary<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-success<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-success\"><a class=\"wp-block-button__link wp-element-button\">btn-success<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-info<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-info\"><a class=\"wp-block-button__link wp-element-button\">btn-info<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group row is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-warning<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-warning\"><a class=\"wp-block-button__link wp-element-button\">btn-warning<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-danger<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-danger\"><a class=\"wp-block-button__link wp-element-button\">btn-danger<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-light<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-light\"><a class=\"wp-block-button__link wp-element-button\">btn-light<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-dark<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-dark\"><a class=\"wp-block-button__link wp-element-button\">btn-dark<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group row is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-outline-primary<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-outline-primary\"><a class=\"wp-block-button__link wp-element-button\">btn-primary<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-outline-secondary<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-outline-secondary\"><a class=\"wp-block-button__link wp-element-button\">btn-secondary<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-outline-success<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-outline-success\"><a class=\"wp-block-button__link wp-element-button\">btn-success<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-outline-info<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-outline-info\"><a class=\"wp-block-button__link wp-element-button\">btn-info<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group row is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-outline-warning<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-outline-warning\"><a class=\"wp-block-button__link wp-element-button\">btn-warning<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-outline-danger<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-outline-danger\"><a class=\"wp-block-button__link wp-element-button\">btn-danger<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-outline-light<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-outline-light\"><a class=\"wp-block-button__link wp-element-button\">btn-light<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-6 col-lg-3 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">btn-outline-dark<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-outline-dark\"><a class=\"wp-block-button__link wp-element-button\">btn-dark<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group row is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-sm-12 col-md-4 col-lg-4 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading is-style-default\">btn-link<\/h3>\n\n\n\n<div class=\"wp-block-group d-flex flex-column flex-md-row is-layout-flow wp-block-group-is-layout-flow\">\n<p><a href=\"#\" class=\"btn btn-danger flex-fill\">link<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-8 col-lg-8 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading is-style-default\">btn-link-w-100<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6c531013 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button btn btn-primary w-100\"><a class=\"wp-block-button__link wp-element-button\">btn-w-100<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group row is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-sm-12 col-md-4 col-lg-4 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading is-style-default\">link-group<\/h3>\n\n\n\n<div class=\"wp-block-group d-flex flex-column flex-md-row is-layout-flow wp-block-group-is-layout-flow\">\n<p><a href=\"#\" class=\"btn btn-danger flex-fill\">link<\/a><a href=\"#\" class=\"btn btn-warning flex-fill\">link<\/a><a href=\"#\" class=\"btn btn-primary flex-fill\">link<\/a><a href=\"#\" class=\"btn btn-success flex-fill\">link<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-8 col-lg-8 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading is-style-default\">link-group-gap-2<\/h3>\n\n\n\n<div class=\"wp-block-group d-flex flex-column flex-md-row gap-2 is-layout-flow wp-block-group-is-layout-flow\">\n<p><a href=\"#\" class=\"btn btn-danger flex-fill\">list-group-link<\/a><a href=\"#\" class=\"btn btn-warning flex-fill\">list-group-link<\/a><a href=\"#\" class=\"btn btn-primary flex-fill\">list-group-link<\/a><a href=\"#\" class=\"btn btn-success flex-fill\">list-group-link<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group row is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-sm-12 col-md-4 col-lg-4 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading is-style-default\">button-dropdown<\/h3>\n\n\n\n<div class=\"wp-block-group container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group\">\n<a href=\"#\" class=\"btn btn-danger dropdown-toggle\" data-bs-toggle=\"dropdown\">dropdown<\/a>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-8 col-lg-8 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading is-style-default\">button-dropdown-3<\/h3>\n\n\n\n<div class=\"wp-block-group container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group btn-group\">\n<div>\n<a href=\"#\" class=\"btn btn-danger dropdown-toggle\" data-bs-toggle=\"dropdown\">dropdown<\/a>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<\/ul>\n<\/div>\n<div>\n<a href=\"#\" class=\"btn btn-success dropdown-toggle\" data-bs-toggle=\"dropdown\">dropdown<\/a>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<\/ul>\n<\/div>\n<div>\n<a href=\"#\" class=\"btn btn-primary dropdown-toggle\" data-bs-toggle=\"dropdown\">dropdown<\/a>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group row is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-sm-12 col-md-4 col-lg-4 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading is-style-default\">button-dropdown-right<\/h3>\n\n\n\n<div class=\"wp-block-group container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group dropend\">\n<a href=\"#\" class=\"btn btn-danger dropdown-toggle\" data-bs-toggle=\"dropdown\">dropdown<\/a>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-sm-12 col-md-8 col-lg-8 is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading is-style-default\">button-dropdown-3-right<\/h3>\n\n\n\n<div class=\"wp-block-group container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group btn-group\">\n<div class=\"dropend\">\n<a href=\"#\" class=\"btn btn-danger dropdown-toggle\" data-bs-toggle=\"dropdown\">dropdown<\/a><\/p>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"dropend\">\n<a href=\"#\" class=\"btn btn-success dropdown-toggle\" data-bs-toggle=\"dropdown\">dropdown<\/a><\/p>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"dropend\">\n<a href=\"#\" class=\"btn btn-primary dropdown-toggle\" data-bs-toggle=\"dropdown\">dropdown<\/a><\/p>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<li><a href=\"#\" class=\"dropdown-item\">dropdown-item<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u30b3\u30f3\u30c6\u30f3\u30c4\u30a8\u30ea\u30a2\u3084\u30d5\u30c3\u30bf\u30fc\u306a\u3069\u306b\u914d\u7f6e\u3067\u304d\u308b\u30d1\u30fc\u30c4\u3082\u3001\u30d6\u30ed\u30c3\u30af\u30d1\u30bf\u30fc\u30f3\u3067\u5404\u7a2e\u3054\u7528\u610f\u3057\u3066\u3044\u307e\u3059\u3002 btn-primary btn-secondary btn-success btn-info btn-warning btn-danger btn-light btn-dark btn-outline-primary btn-outline-secondary btn-outline-success btn-outline-info btn-outline-warning btn-outline-danger btn-outline-light btn-outline-dark btn-link link btn-link-w-100 link-group linklinklinklink link-group-gap-2 list-group-linklist-group-linklist-group-linklist-group-link button-dropdown dropdown dropdown-item dropdown-item dropdown-item dropdown-item dropdown-item button-dropdown-3 dropdown dropdown-item dropdown-item dropdown-item dropdown-item dropdown-item dropdown dropdown-item\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[],"class_list":["post-5156","post","type-post","status-publish","format-standard","hentry","category-design-pattern"],"_links":{"self":[{"href":"https:\/\/full-site-patterner.com\/en\/wp-json\/wp\/v2\/posts\/5156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/full-site-patterner.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/full-site-patterner.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/full-site-patterner.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/full-site-patterner.com\/en\/wp-json\/wp\/v2\/comments?post=5156"}],"version-history":[{"count":1,"href":"https:\/\/full-site-patterner.com\/en\/wp-json\/wp\/v2\/posts\/5156\/revisions"}],"predecessor-version":[{"id":5157,"href":"https:\/\/full-site-patterner.com\/en\/wp-json\/wp\/v2\/posts\/5156\/revisions\/5157"}],"wp:attachment":[{"href":"https:\/\/full-site-patterner.com\/en\/wp-json\/wp\/v2\/media?parent=5156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/full-site-patterner.com\/en\/wp-json\/wp\/v2\/categories?post=5156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/full-site-patterner.com\/en\/wp-json\/wp\/v2\/tags?post=5156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}