Ribbon
activeButtonId attribute is used to specify the selcted button. The id attribute of the button must match the activeButtonId in order for the button to be selected.Result
Loading...
Live Editor
function Demo() {const profileIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"><pathd="M7.83872 25.9172C8.64982 24.0063 10.5436 22.666 12.7503 22.666H20.7503C22.9571 22.666 24.8508 24.0063 25.6619 25.9172M22.0837 12.666C22.0837 15.6115 19.6958 17.9993 16.7503 17.9993C13.8048 17.9993 11.417 15.6115 11.417 12.666C11.417 9.7205 13.8048 7.33268 16.7503 7.33268C19.6958 7.33268 22.0837 9.7205 22.0837 12.666ZM30.0837 15.9993C30.0837 23.3631 24.1141 29.3327 16.7503 29.3327C9.38653 29.3327 3.41699 23.3631 3.41699 15.9993C3.41699 8.63555 9.38653 2.66602 16.7503 2.66602C24.1141 2.66602 30.0837 8.63555 30.0837 15.9993Z"strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/></svg>);const summaryIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"><pathd="M26.9163 13.9993V9.06602C26.9163 6.82581 26.9163 5.7057 26.4804 4.85005C26.0969 4.09741 25.4849 3.48548 24.7323 3.10199C23.8767 2.66602 22.7566 2.66602 20.5163 2.66602H11.983C9.7428 2.66602 8.62269 2.66602 7.76705 3.10199C7.0144 3.48548 6.40248 4.09741 6.01898 4.85005C5.58301 5.7057 5.58301 6.82581 5.58301 9.06602V22.9327C5.58301 25.1729 5.58301 26.293 6.01898 27.1486C6.40248 27.9013 7.0144 28.5132 7.76705 28.8967C8.62269 29.3327 9.7428 29.3327 11.983 29.3327H16.2497M18.9163 14.666H10.9163M13.583 19.9993H10.9163M21.583 9.33268H10.9163"strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/><pathd="M30.75 30.75L26.6833 26.6833M28.1722 22.9611C28.1722 25.8391 25.8391 28.1722 22.9611 28.1722C20.0831 28.1722 17.75 25.8391 17.75 22.9611C17.75 20.0831 20.0831 17.75 22.9611 17.75C25.8391 17.75 28.1722 20.0831 28.1722 22.9611Z"strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/></svg>);const [activeButtonId, setActiveButtonId] = React.useState('one');function onButtonClick(key) {setActiveButtonId(key);}return (<Ribbon activeButtonId={activeButtonId} onButtonClick={onButtonClick}><Ribbon.Button id="one" title="one" renderIcon={profileIcon} /><Ribbon.Button id="two" title="two" renderIcon={summaryIcon} /><Ribbon.Separator /><Ribbon.Button id="three" title="three" renderIcon={summaryIcon} /><Ribbon.Button id="four" title="four" renderIcon={summaryIcon} /><Ribbon.Button id="five" title="five" renderIcon={summaryIcon} /><Ribbon.Button id="six" title="six" renderIcon={summaryIcon} /><Ribbon.Button id="seven" title="seven" renderIcon={summaryIcon} /><Ribbon.Button id="eight" title="eight" renderIcon={summaryIcon} /><Ribbon.Button id="nine" title="nine" renderIcon={summaryIcon} /><Ribbon.Button id="ten" title="ten" renderIcon={summaryIcon} /><Ribbon.Button id="eleven" title="eleven" renderIcon={summaryIcon} /><Ribbon.Button id="twelve" title="twelve" renderIcon={summaryIcon} /><Ribbon.Button id="thirteen" title="thirteen" renderIcon={summaryIcon} /><Ribbon.Button id="fourteen" title="fourteen" renderIcon={summaryIcon} /><Ribbon.Button id="fifteen" title="fifteen" renderIcon={summaryIcon} /><Ribbon.Button id="sixteen" title="sixteen" renderIcon={summaryIcon} /><Ribbon.Button id="seventeen" title="seventeen" renderIcon={summaryIcon} /><Ribbon.Button id="eighteen" title="eighteen" renderIcon={summaryIcon} /></Ribbon>);}