1"use strict";(self.webpackChunk_synergycodes_overflow_ui_website=self.webpackChunk_synergycodes_overflow_ui_website||[]).push([[8453],{8701:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>d,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>c});const a=JSON.parse('{"id":"authored/ui/nav-button/nav-button","title":"Nav Button","description":"A flexible and type-safe nav button component system that adjusts its appearance and behavior based on its content \u2014 offering a simple API despite the complexity of multiple types and variants.","source":"@site/docs/authored/ui/nav-button/nav-button.mdx","sourceDirName":"authored/ui/nav-button","slug":"/authored/ui/nav-button/","permalink":"/ui-components/authored/ui/nav-button/","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Nav Button"},"sidebar":"mainSidebar","previous":{"title":"Modal","permalink":"/ui-components/authored/ui/modal/"},"next":{"title":"With Icon","permalink":"/ui-components/authored/ui/nav-button/nav-icon-button/"}}');var o=n(4489),s=n(3237);const i={title:"Nav Button"},d=void 0,r={},c=[{value:"Usage",id:"usage",level:3}];function l(e){const t={code:"code",h3:"h3",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"A flexible and type-safe nav button component system that adjusts its appearance and behavior based on its content \u2014 offering a simple API despite the complexity of multiple types and variants."}),"\n",(0,o.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.p,{children:"The component adapts based on what you place inside:"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Example usage"}),(0,o.jsx)(t.th,{children:"Rendered as"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"<NavButton> Save </NavButton>"})}),(0,o.jsx)(t.td,{children:"Label-only button"})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"<NavButton> <Icon/> </NavButton>"})}),(0,o.jsx)(t.td,{children:"Icon-only button"})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"<NavButton> <Icon/> Save </NavButton>"})}),(0,o.jsx)(t.td,{children:"Icon + label button"})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"<NavButton> <Icon/> Save <Icon/> </NavButton>"})}),(0,o.jsx)(t.td,{children:"Icon left, label, icon right"})]})]})]}),"\n",(0,o.jsx)(t.p,{children:"Each type automatically applies the appropriate spacing, padding, and layout \u2014 no additional configuration required."}),"\n",(0,o.jsxs)(t.p,{children:["Additionally, the component makes certain props available only when appropriate.\nFor example, ",(0,o.jsx)(t.code,{children:"isLoading"})," is available for label-only buttons but not for icon-only buttons \u2014 ensuring each variant remains predictable and consistent."]}),"\n",(0,o.jsxs)(t.p,{children:["Use ",(0,o.jsx)(t.code,{children:"<NavButton>"})," for navigation-specific use cases.\n",(0,o.jsx)(t.code,{children:"<Button>"})," and ",(0,o.jsx)(t.code,{children:"<NavButton>"})," share the same internal structure, but ",(0,o.jsx)(t.code,{children:"NavButton"})," has a streamlined feature set, more sizes and supports an additional ",(0,o.jsx)(t.code,{children:"selected"})," state."]})]})}function u(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.