Edit Bottom Sheet

Name

Also known as (comma separated)

Brief definition Bottom-mounted temporary panel.

Notes **Responsive & Mobile UI:** Bottom-mounted panel.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Title", "default": "Filter results" }, { "id": "content", "type": "text", "label": "Content", "default": "Choose the categories you'd like to include, then apply to update your results." }, { "id": "variant", "type": "select", "label": "Grabber style", "default": "handle", "options": [ "handle", "tabs", "plain" ] }, { "id": "accent", "type": "color", "label": "Apply colour", "default": "#A8E6C1", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "height", "type": "number", "label": "Height", "default": 260, "min": 160, "max": 420, "step": 20 }, { "id": "backdrop", "type": "toggle", "label": "Show backdrop", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"bs-demo\">\n {{#if backdrop}}<div class=\"bs-backdrop\"></div>{{/if}}\n <div class=\"bs-sheet bs-sheet--{{variant}}\" style=\"height:{{height}}px;\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"bs-title\">\n <div class=\"bs-grabber\" aria-hidden=\"true\"></div>\n <div class=\"bs-header\">\n <h3 id=\"bs-title\" class=\"bs-title\">{{title}}</h3>\n <button type=\"button\" class=\"bs-close\" aria-label=\"Close\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M1 1L13 13M13 1L1 13\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg>\n </button>\n </div>\n <div class=\"bs-body\">\n <p>{{content}}</p>\n </div>\n <div class=\"bs-footer\">\n <button type=\"button\" class=\"bs-apply\" style=\"background:{{accent}};border-color:{{accent}};\">Apply</button>\n </div>\n </div>\n</div>\n<style>\n.bs-demo { position: relative; min-height: 460px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #BFD9F2, #D9C8F0); }\n.bs-backdrop { position: absolute; inset: 0; background: rgba(36,20,48,.45); }\n.bs-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; background: #FAF7F2; color: #241430; border-radius: 20px 20px 0 0; box-shadow: 0 -14px 40px rgba(36,20,48,.25); box-sizing: border-box; padding: 14px 20px 20px; display: flex; flex-direction: column; font: 16px/1.5 system-ui, sans-serif; }\n.bs-grabber { width: 40px; height: 4px; border-radius: 2px; background: #24143033; margin: 0 auto 12px; }\n.bs-sheet--tabs .bs-grabber { width: 64px; border-radius: 4px; background: linear-gradient(90deg, #241430 50%, #24143033 50%); }\n.bs-sheet--plain .bs-grabber { visibility: hidden; }\n.bs-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }\n.bs-title { margin: 0; font-size: 18px; font-weight: 600; }\n.bs-close { border: none; background: #24143012; color: #241430; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }\n.bs-close:hover, .bs-close:focus-visible { background: #24143022; outline: none; }\n.bs-body { flex: 1; overflow: auto; font-size: 14px; color: #241430cc; margin-bottom: 16px; }\n.bs-body p { margin: 0; }\n.bs-footer { display: flex; justify-content: flex-end; }\n.bs-apply { font: 600 14px system-ui, sans-serif; padding: 9px 20px; border-radius: 8px; border: 1.5px solid transparent; color: #241430; cursor: pointer; }\n.bs-apply:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>", "tailwind": "<div class=\"relative min-h-[460px] rounded-xl overflow-hidden\" style=\"background:linear-gradient(135deg,#BFD9F2,#D9C8F0);\">\n {{#if backdrop}}<div class=\"absolute inset-0 bg-[#241430]/45\"></div>{{/if}}\n <div role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"bs-tw-title\" class=\"bs-tw bs-tw--{{variant}} absolute left-0 right-0 bottom-0 z-10 bg-[#FAF7F2] text-[#241430] rounded-t-[20px] shadow-[0_-14px_40px_rgba(36,20,48,.25)] box-border px-5 pb-5 pt-3.5 flex flex-col font-sans\" style=\"height:{{height}}px;\">\n <div aria-hidden=\"true\" class=\"bs-tw-grabber w-10 h-1 rounded-full bg-[#24143033] mx-auto mb-3\"></div>\n <div class=\"flex items-start justify-between gap-3 mb-2.5\">\n <h3 id=\"bs-tw-title\" class=\"m-0 text-lg font-semibold\">{{title}}</h3>\n <button type=\"button\" aria-label=\"Close\" class=\"border-0 bg-[#24143012] text-[#241430] w-[30px] h-[30px] rounded-full grid place-items-center cursor-pointer shrink-0 p-0 hover:bg-[#24143022] focus-visible:outline-none\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M1 1L13 13M13 1L1 13\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg>\n </button>\n </div>\n <div class=\"flex-1 overflow-auto text-sm text-[#241430]/80 mb-4\">\n <p class=\"m-0\">{{content}}</p>\n </div>\n <div class=\"flex justify-end\">\n <button type=\"button\" class=\"font-semibold text-sm px-5 py-2 rounded-lg border border-transparent text-[#241430]\" style=\"background:{{accent}};border-color:{{accent}}\">Apply</button>\n </div>\n </div>\n</div>\n<style>\n.bs-tw--tabs .bs-tw-grabber { width: 64px; border-radius: 4px; background: linear-gradient(90deg, #241430 50%, #24143033 50%); }\n.bs-tw--plain .bs-tw-grabber { visibility: hidden; }\n</style>", "react": "export function BottomSheet({\n title = \"{{title}}\",\n content = \"{{content}}\",\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n height = {{height}},\n backdrop = {{backdrop}},\n}) {\n const grabberStyle = variant === \"tabs\"\n ? { width: 64, height: 4, borderRadius: 4, background: \"linear-gradient(90deg, #241430 50%, #24143033 50%)\", margin: \"0 auto 12px\" }\n : { width: 40, height: 4, borderRadius: 2, background: \"#24143033\", margin: \"0 auto 12px\",\n visibility: variant === \"plain\" ? \"hidden\" : \"visible\" };\n return (\n <div style={{ position: \"relative\", minHeight: 460, borderRadius: 12, overflow: \"hidden\",\n background: \"linear-gradient(135deg, #BFD9F2, #D9C8F0)\" }}>\n {backdrop && <div style={{ position: \"absolute\", inset: 0, background: \"rgba(36,20,48,.45)\" }} />}\n <div role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"bs-title\" style={{ position: \"absolute\", left: 0,\n right: 0, bottom: 0, zIndex: 1, height, boxSizing: \"border-box\", background: \"#FAF7F2\", color: \"#241430\",\n borderRadius: \"20px 20px 0 0\", boxShadow: \"0 -14px 40px rgba(36,20,48,.25)\", padding: \"14px 20px 20px\",\n display: \"flex\", flexDirection: \"column\", fontFamily: \"system-ui, sans-serif\" }}>\n <div aria-hidden=\"true\" style={grabberStyle} />\n <div style={{ display: \"flex\", alignItems: \"flex-start\", justifyContent: \"space-between\", gap: 12, marginBottom: 10 }}>\n <h3 id=\"bs-title\" style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>{title}</h3>\n <button type=\"button\" aria-label=\"Close\" style={{ border: \"none\", background: \"#24143012\", color: \"#241430\",\n width: 30, height: 30, borderRadius: \"50%\", display: \"grid\", placeItems: \"center\", cursor: \"pointer\", padding: 0 }}>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M1 1L13 13M13 1L1 13\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" /></svg>\n </button>\n </div>\n <div style={{ flex: 1, overflow: \"auto\", fontSize: 14, color: \"#241430cc\", marginBottom: 16 }}>\n <p style={{ margin: 0 }}>{content}</p>\n </div>\n <div style={{ display: \"flex\", justifyContent: \"flex-end\" }}>\n <button type=\"button\" style={{ background: accent, borderColor: accent, color: \"#241430\" }}>Apply</button>\n </div>\n </div>\n </div>\n );\n}" }