{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"ButtonGroup Component","siteUrl":"https://xrpl.org","llmstxt":{"hide":false,"title":"XRPL Developer Portal & Documentation","description":"Explore XRP Ledger documentation, blogs, and other blockchain developer resources needed to start building and integrating with the ledger.","details":{"content":"XRP Ledger concepts, use cases, tutorials, references, and other blockchain developer resources. Also, stay up to date with release announcements and more through the XRPL Blog."},"sections":[{"title":"Introduction","description":"A high-level introduction to the XRP Ledger.","includeFiles":["docs/introduction/**/*.*","about/faq.md"],"excludeFiles":["docs/introduction/index.md"]},{"title":"Use Cases","description":"Real-world applications and business scenarios for the XRP Ledger.","includeFiles":["docs/use-cases/**/*.*"],"excludeFiles":["docs/use-cases/index.md","docs/use-cases/defi/index.md"]},{"title":"Agentic Transactions","description":"XRPL AI Starter Kit to help autonomous agents discover, set up, and execute agentic transactions on the XRP Ledger.","includeFiles":["docs/agents/**/*.*"]},{"title":"Concepts","description":"Core concepts including accounts, tokens, transactions, consensus, and more.","includeFiles":["docs/concepts/**/*.*"],"excludeFiles":["docs/concepts/index.md","docs/concepts/decentralized-storage/index.md","docs/concepts/payment-types/index.md"]},{"title":"Tutorials","description":"Step-by-step guides for building on the XRP Ledger in JavaScript, Python, Go, and more.","includeFiles":["docs/tutorials/**/*.*"]},{"title":"References","description":"Protocol specification, transaction types, ledger entries, and API methods.","includeFiles":["docs/references/**/*.*"],"excludeFiles":["docs/references/xrp-api.md","docs/references/data-api.md","docs/references/protocol/index.md","docs/references/protocol/ledger-data/ledger-entry-types/index.md","docs/references/protocol/transactions/index.md","docs/references/protocol/transactions/types/index.md","docs/references/http-websocket-apis/api-conventions/index.md","docs/references/http-websocket-apis/public-api-methods/*/index.md","docs/references/http-websocket-apis/admin-api-methods/*/index.md"]},{"title":"Infrastructure","description":"Install, configure, and troubleshoot xrpld and Clio servers.","includeFiles":["docs/infrastructure/**/*.*"],"excludeFiles":["docs/infrastructure/index.md","docs/infrastructure/*/index.md","docs/infrastructure/installation/build-run-xrpld-in-reporting-mode.md","docs/infrastructure/configuration/data-retention/index.md","docs/infrastructure/configuration/server-modes/index.md"]},{"title":"Blog (2023+)","description":"Recent XRPL Blog posts (showing 2023 and newer).","includeFiles":["blog/2023/**/*.*","blog/2024/**/*.*","blog/2025/**/*.*","blog/2026/**/*.*"]},{"title":"Resources","description":"Developer resources and contribution guidelines.","includeFiles":["resources/**/*.*"]}]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"buttongroup-component","__idx":0},"children":["ButtonGroup Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A responsive button group container that assigns button emphasis based on the number of buttons passed. Stacks vertically on mobile and horizontally on tablet+."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"features","__idx":1},"children":["Features"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Auto Emphasis"]},": Assigns emphasis by button count (override with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["forceEmphasis"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Layout"]},": Vertical stack on mobile, horizontal row on tablet+ (for 1-2 buttons)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Block Layout"]},": 3+ buttons render as a vertical block"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Customizable Spacing"]},": Control gap between buttons on tablet+"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Surface Support"]},": One ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["surface"]}," selects the token group for the whole set"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Max Buttons Limit"]},": Optionally limit the number of buttons rendered"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"button-behavior","__idx":2},"children":["Button Behavior"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component determines emphasis by count:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Count"},"children":["Count"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Behavior"},"children":["Behavior"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["1 button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["singleButtonEmphasis"]}," (default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["strong"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["2 buttons"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["First ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["strong"]},", second ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtle"]}," (responsive layout)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["3+ buttons"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["All ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtle"]}," in block layout (vertical on all screen sizes)"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"overriding-the-emphasis","__idx":3},"children":["Overriding the emphasis"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["forceEmphasis"]}," for one uniform treatment no matter how many buttons the"," ","section receives. It supersedes both the count-based defaults and"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["singleButtonEmphasis"]},"; layout (inline vs. block) still follows the count."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An all-",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtle"]}," set renders as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]},"s rather than Buttons, so the labels sit"," ","flush with the surrounding text. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FeatureTwoColumn"]}," is the reference consumer."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<ButtonGroup\n  buttons={[{ label: 'Learn More', href: '/learn' }]}\n  forceEmphasis=\"subtle\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage","__idx":4},"children":["Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { ButtonGroup } from 'shared/patterns/ButtonGroup';\n\n// Single button (strong by default)\n<ButtonGroup buttons={[{ label: \"Get Started\", href: \"/start\" }]} />\n\n// Single button as standard\n<ButtonGroup\n  buttons={[{ label: \"Learn More\", href: \"/learn\" }]}\n  singleButtonEmphasis=\"standard\"\n/>\n\n// Two buttons (auto: strong + subtle)\n<ButtonGroup\n  buttons={[\n    { label: \"Get Started\", href: \"/start\" },\n    { label: \"Learn More\", href: \"/learn\" }\n  ]}\n/>\n\n// Three or more (auto: all subtle, block layout) on a solid brand block\n<ButtonGroup\n  buttons={[\n    { label: \"Documentation\", href: \"/docs\" },\n    { label: \"API Reference\", href: \"/api\" },\n    { label: \"Tutorials\", href: \"/tutorials\" }\n  ]}\n  surface={{ context: \"on-saturated\" }}\n/>\n\n// Limit to 2 buttons even if more are passed\n<ButtonGroup\n  buttons={[\n    { label: \"First\", href: \"/first\" },\n    { label: \"Second\", href: \"/second\" },\n    { label: \"Third (not rendered)\", href: \"/third\" }\n  ]}\n  maxButtons={2}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props","__idx":5},"children":["Props"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttons"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonConfig[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of button configurations"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["surface"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonSurface"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{}"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["intention"]}," + ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["context"]}," as one value, for the whole set"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gap"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'none' | 'small' | 'medium'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'small'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gap between buttons: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["none"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["small"]}," are 0px/4px on tablet+; ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["medium"]}," is 16px through tablet, 24px at lg+"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["singleButtonEmphasis"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'strong' | 'standard'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'strong'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Emphasis for a lone button"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["forceEmphasis"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonEmphasis"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Force every button to this emphasis, overriding the count-based defaults and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["singleButtonEmphasis"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["maxButtons"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Maximum number of buttons to render"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["''"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buttonconfig","__idx":6},"children":["ButtonConfig"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"interface ButtonConfig {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":7},"children":["Responsive Behavior"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mobile (<768px)"]},": Buttons stack vertically with 8px gap, aligned to start"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tablet+ (≥768px)"]},": Buttons align horizontally, centered, with configurable gap (0px or 4px)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes","__idx":8},"children":["CSS Classes"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-button-group"]}," - Base component"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-button-group--gap-none"]}," - No gap on tablet+ (0px)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-button-group--gap-small"]}," - Small gap on tablet+ (4px)"]}]}]},"headings":[{"value":"ButtonGroup Component","id":"buttongroup-component","depth":1},{"value":"Features","id":"features","depth":2},{"value":"Button Behavior","id":"button-behavior","depth":2},{"value":"Overriding the emphasis","id":"overriding-the-emphasis","depth":3},{"value":"Usage","id":"usage","depth":2},{"value":"Props","id":"props","depth":2},{"value":"ButtonConfig","id":"buttonconfig","depth":3},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"CSS Classes","id":"css-classes","depth":2}],"frontmatter":{"seo":{"title":"ButtonGroup Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/patterns/ButtonGroup/README.md"},"lastModified":"2026-08-25T04:24:09.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/patterns/buttongroup/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}