{ "componentChunkName": "component---src-components-left-nav-layout-js", "path": "/components/button", "result": {"data":{"allMdx":{"edges":[{"node":{"frontmatter":{"path":"/foundations","title":"Foundations","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/colors","title":"Colors","group":"Foundations","status":null,"blurb":"Overview of semantic colors and the full color palette","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/layout","title":"Layout","group":"Foundations","status":null,"blurb":"Spacing between elements on the page are organized in units of 4px.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/accessibility","title":"Accessibility","group":"Foundations","status":null,"blurb":"We aim to make our website and software accessible to the widest audience possible","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/motion","title":"Motion","group":"Foundations","status":null,"blurb":"I like the way you move","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/shadows","title":"Shadows","group":"Foundations","status":null,"blurb":"Shadow is the visual way to communicate the elevation and hierarchy of components.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/radii","title":"Radii","group":"Foundations","status":null,"blurb":"Corner radii are generally organized in units of 2px","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/color","title":"Color","group":"Brand","status":null,"blurb":"Our color system develops on our unique aesthetic and offers flexibility to harmonize the visual consistency across every touchpoint.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/foundations/typography","title":"Typography","group":"Foundations","status":null,"blurb":"Houzz typography system can be used with other components to present content and product clearly and effectively to users.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/glyphs","title":"Glyphs","group":"Brand","status":null,"blurb":"The Houzz glyphs are single-color icons portraying a subject as is, serving as a visual cue throughout the web and mobile products and marketing materials.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/brand","title":"Brand","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/illustration","title":"Illustrations","group":"Brand","status":null,"blurb":"As a visual communication tool, Houzz's illustration supports the effective and efficient delivery of messages and story-telling.","isPrivate":true}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/logo/architecture","title":"Brand Architecture","group":"Brand","status":null,"blurb":"Our brand architecture system organizes our sub-brands, products and partnerships to help users relate to Houzz.","isPrivate":null}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/logo","title":"The Logo","group":"Brand","status":null,"blurb":"The Houzz logos are one of our most valuable assets. It sets us apart from our competitors and represents everything we are: our experience, our values and our offerings.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/product-illustrations","title":"Product Illustrations","group":"Brand","status":null,"blurb":"Our product illustrations reference Houzz physical products in a simple manner to create educational moments as opposed to relying on a metaphorical narrative.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/brand/photography","title":"Photography","group":"Brand","status":null,"blurb":"Another visual communication tool, selecting the right photography is critical as it relates to our brand.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/secondary-graphics","title":"Secondary Graphics","group":"Brand","status":null,"blurb":"Secondary graphics are the visual elements we use to visualize our brand personality and to tell the story of our positioning statement and messaging.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing","title":"Content","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/writing/language-grammar","title":"Language & Grammar","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/messaging-guidelines","title":"Messaging Guidelines","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/brand/typography","title":"Typography","group":"Brand","status":null,"blurb":"Typography is our system of fonts. Our font Proxima Nova assists our homeowners and home renovation professionals through each stage of their journey.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/vocabulary","title":"Vocabulary","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/writing-style","title":"Writing Style","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/voice-tone","title":"Voice & Tone","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/marketing","title":"Marketing","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/avatar/avatar-group","title":"Avatar Group","group":"Components","status":"Healthy","blurb":"Displays a list of avatars as a stack, allowing to limit the maximum number of avatars visible. ","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/collapsible/accordion","title":"Accordion","group":"Components","status":"Healthy","blurb":"Use an accordion simple to reduce page length or scrolling by the user when a single content block would require too much space.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/badge","title":"Badge","group":"Components","status":"Healthy","blurb":"A non-interactive badge component","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/avatar","title":"Avatar","group":"Components","status":"Healthy","blurb":"Represents a user and can display a profile picture or initials. If neither are available, it will fallback to a ghost icon.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/banner","title":"Banner","group":"Components","status":"Healthy","blurb":"Banners show important information sunch as persistent condition, system status etc to users.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/box","title":"Box","group":"Components","status":"Healthy","blurb":"The Box component serves as a wrapper component for most layout needs. By default, it renders a div element","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/button/button-group","title":"Button Group","group":"Components","status":"Healthy","blurb":"ButtonGroup helps grouping the multiple buttons with same style","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/checkbox","title":"Checkbox","group":"Components","status":"Healthy","blurb":"Used for selecting one or multiple items from several options.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/button","title":"Button","group":"Components","status":"Healthy","blurb":"Buttons make common actions more obvious and help users more easily perform them. Buttons use text and sometimes icons to communicate the action that will occur when the user interacts with them.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/card","title":"Card","group":"Components","status":"Healthy","blurb":"A card","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/content-icon","title":"Content Icon","group":"Components","status":"Healthy","blurb":"A base component useful for implementing color-coded icons representing features, documents etc.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/get-started","title":"Getting Started","group":"!Documentation","status":null,"blurb":"houzz-ui is already integrated with Houzz jukwaa applications. Below is a guide to setting up in a new app, or information if you're curious what tooling we use.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/collapsible","title":"Collapsible","group":"Components","status":"Healthy","blurb":"The collapsible is a UI component for expanding or collapsing content areas within a page.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/icon/concept-icon","title":"Concept Icon","group":"Components","status":"Healthy","blurb":"Houzz concept (aka tier 2) icons","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/grid","title":"Grid","group":"Components","status":"Healthy","blurb":"A responsive grid layout component.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/guide","title":"Developer Guide","group":"!Documentation","status":null,"blurb":"houzz-ui was created to provide a composable, accessibile, extendable / themable component library based off of Houzz's design system and principles.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components","title":"Components","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/icon","title":"Icon","group":"Components","status":"Healthy","blurb":"Houzz icons","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/link","title":"Link","group":"Components","status":"Healthy","blurb":"A link is a navigation element most commonly used to navigate from one page to another","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/loading","title":"Loading","group":"Components","status":"Healthy","blurb":"Different ways to indicate something is loading","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu/flyout","title":"Flyout Menu","group":"Components","status":"Healthy","blurb":"Flyout Menu is a Menu that opens on hover vs click","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu/mega","title":"Mega Menu","group":"Components","status":"Planned","blurb":"Dropdown / overlay that behaves more like a Modal","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu/application","title":"Application/Toolbar Menu","group":"Components","status":"Planned","blurb":"A group of dropdown navigation Menus or links that define an applications available actions","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu","title":"Menu / Dropdown","group":"Components","status":"Healthy","blurb":"An accessible dropdown menu. Used when the options are actions or navigations to other pages.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/modal","title":"Modal","group":"Components","status":"Dev","blurb":"Yes, another modal","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/pill","title":"Pill","group":"Components","status":"Healthy","blurb":"Pills are compact elements that represent an input, attribute, or action. Pills can be used to help users discover, identify, or refine content.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/popover/callout","title":"Callout","group":"Components","status":"Healthy","blurb":"Callouts are anchored components that can be used to teach, inform or guide users about certain features of the product.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/popover","title":"Popover","group":"Components","status":"Healthy","blurb":"Thin wrapper around PopperJS library","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/radio","title":"Radio","group":"Components","status":"Healthy","blurb":"A radio button is an element that allows a user to select a single item from a predefined list of options.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/recipes","title":"Recipes","group":"!Documentation","status":null,"blurb":"Some helpful guides to get started. Please let us know if you have any requests.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/select/select-menu","title":"Select Menu","group":"Components","status":"Healthy","blurb":"Implements a listbox UI component. SelectMenu is similar to a Menu, but keeps track of the selected item and displays it. It behaves similar to a native select element","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/card/selection-card","title":"Selection Card","group":"Components","status":"Healthy","blurb":"A card with checkbox or radio input selection","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/select","title":"Select","group":"Components","status":"Healthy","blurb":"Allows users pick a value from predefined options","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/skeleton","title":"Skeleton","group":"Components","status":"Healthy","blurb":"A building block for placeholder UI previews","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/slider","title":"Slider","group":"Components","status":"Healthy","blurb":"Used for making selections from a range of values","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/stack","title":"Stack","group":"Components","status":"Healthy","blurb":"A responsive flex layout component.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/switch","title":"Switch","group":"Components","status":"Healthy","blurb":"A toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Users expect switches to see an immediate effect when they toggle it on.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/status","title":"Status Indicator","group":"Components","status":"Healthy","blurb":"A badge variant representing a status.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table/cell-recipes","title":"Cell Recipes","group":"Other","status":null,"blurb":"Reusable cell components","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/system-props","title":"System Props","group":"!Documentation","status":null,"blurb":"Houzz UI utilize \"System Props\", which give us a consistent interface to style our components through props. To achieve this, we use styled-system to group common props which are automatically applied to each component.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table/column-recipes","title":"Column Recipes","group":"Other","status":null,"blurb":"Pre-configured column definitions for common patterns and use cases","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table/view-customization","title":"View Customization","group":"Other","status":null,"blurb":"User table view preferences, storing and retreiving","isPrivate":true}}},{"node":{"frontmatter":{"path":"/components/tabs","title":"Tabs","group":"Components","status":"Healthy","blurb":"Tabs are used to navigate between related views within the same context.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table","title":"Table","group":"Other","status":null,"blurb":"A collection of UI components for displaying data in tables","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/textarea","title":"Textarea","group":"Components","status":"Healthy","blurb":"Textareas allow users to input and edit a longer amount of custom text than a text field.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/text","title":"Text","group":"Components","status":"Healthy","blurb":"Text is the one of the main ways to communicate and convey ideas in product.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/tooltip","title":"Tooltip","group":"Components","status":"Healthy","blurb":"Tooltips display informative and guiding content when users hover over or focus on an element.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/toast","title":"Toast","group":"Components","status":"Dev","blurb":"Toasts show up to communicate messages to users with limited information and actions.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/text-input","title":"Text Input","group":"Components","status":"Healthy","blurb":"TextInput let users enter and edit text","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/theme","title":"Theme","group":"!Documentation","status":null,"blurb":"Theme definition","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/toggle-button","title":"Toggle Button","group":"Components","status":"Healthy","blurb":"Serves as a tool to group related button options. The toggle component adjusts how content is presented on a page. A user cannot select two buttons at once; they must select one OR the other option.","isPrivate":null}}}]},"mdx":{"id":"2ad7848e-e8fb-57c2-acab-f410c68a65b6","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"path\": \"/components/button\",\n \"title\": \"Button\",\n \"group\": \"Components\",\n \"status\": \"Healthy\",\n \"blurb\": \"Buttons make common actions more obvious and help users more easily perform them. Buttons use text and sometimes icons to communicate the action that will occur when the user interacts with them.\",\n \"externalLink\": \"https://github.com/Houzz/houzz-ui/tree/master/packages/components/lib/button\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar PropTable = makeShortcode(\"PropTable\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h3\", {\n \"id\": \"usage\"\n }, \"Usage\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Button\"), \" comes with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"solid\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"outline\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"outline-filled\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"raised\"), \", and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"link\"), \" variants. Use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"variant\"), \" prop to change the appearance of the button.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"importString=Button defaultOpen transparentBg\",\n \"importString\": \"Button\",\n \"defaultOpen\": true,\n \"transparentBg\": true\n }, \"\\n \\n \\n \\n \\n \\n\\n\")), mdx(\"h3\", {\n \"id\": \"size\"\n }, \"Size\"), mdx(\"p\", null, \"Use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"size\"), \" prop to select from available size variants.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"importString=Button\",\n \"importString\": \"Button\"\n }, \"\\n \\n \\n \\n\\n\")), mdx(\"h3\", {\n \"id\": \"color\"\n }, \"Color\"), mdx(\"p\", null, \"Using houzz-ui's semantic color names, you can apply a subset of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"colorVariant\"), \" to any \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"variant\"), \". The values available for \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Button\"), \" are \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"accent\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"neutral\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"danger\"), \", and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"autoMate\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"importString=Button transparentBg\",\n \"importString\": \"Button\",\n \"transparentBg\": true\n }, \"\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n\")), mdx(\"h3\", {\n \"id\": \"button-with-icon\"\n }, \"Button with Icon\"), mdx(\"p\", null, \"An \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Icon\"), \" can render to the left or right of the Button text.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\n \\n \\n \\n ))}\\n \\n \\n {['solid', 'outline', 'outline-filled', 'raised', 'link'].map((variant) => (\\n \\n ))}\\n \\n \\n {['solid', 'outline', 'outline-filled', 'raised', 'link'].map((variant) => (\\n \\n ))}\\n \\n \\n {['solid', 'outline', 'outline-filled', 'raised', 'link'].map((variant) => (\\n \\n ))}\\n \\n \\n {['solid', 'outline', 'outline-filled', 'raised', 'link'].map((variant) => (\\n \\n ))}\\n \\n \\n {['solid', 'outline', 'outline-filled', 'raised', 'link'].map((variant) => (\\n \\n ))}\\n \\n \\n {['solid', 'outline', 'outline-filled', 'raised', 'link'].map((variant) => (\\n \\n ))}\\n \\n \\n {['solid', 'outline', 'outline-filled', 'raised', 'link'].map((variant) => (\\n \\n ))}\\n \\n\\n\")), mdx(\"h3\", {\n \"id\": \"buttons-as-anchor\"\n }, \"Buttons as anchor\"), mdx(\"p\", null, \"Passing a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"href\"), \" prop will make the button be rendered as an \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" tag.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\n \\n \\n \\n \\n\\n\")), mdx(\"h3\", {\n \"id\": \"icon-buttons\"\n }, \"Icon Buttons\"), mdx(\"p\", null, \"Helper to render round buttons and optional (recommended) tooltip\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\n \\n \\n \\n\\n\")), mdx(\"h3\", {\n \"id\": \"buttons-on-dark-background\"\n }, \"Buttons on dark background\"), mdx(\"p\", null, \"Often times, sections on pages can have a dark background. We have not built a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"inverse\"), \" colorVariant into \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Button\"), \" yet. For the time being,\\nuse \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \". \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"InverseButton\"), \" only has one colorVariant (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"neutral\"), \") and 2 variants (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"outline\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"link\"), \")\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\n Default\\n \\n Link\\n \\n Disabled\\n \\n Loading\\n\\n\")), mdx(\"h3\", {\n \"id\": \"pill-button\"\n }, \"Pill Button\"), mdx(\"p\", null, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"shape=\\\"pill\\\"\"), \" to get rounded / pill / bubble shaped buttons\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\n \\n \\n \\n \\n \\n\\n\")), mdx(\"h3\", {\n \"id\": \"custom-styles-with-psuedo-props\"\n }, \"Custom styles with \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"psuedo\"), \" props\"), mdx(\"p\", null, \"In certain situations, the available variants will not suffice. \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Button\"), \" styles can be overridden using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"houzz-ui\"), \" system and psuedo props:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"_active\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"_hover\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"_focus\"))), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Note\"), \": It is important to provide all 3 to have proper focus/active styling. Otherwise, you may observe odd side effects from the\\nexisting specificty defined in the default \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Button\"), \" component. This \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"focus\"), \" state for \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"outline\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"raised\"), \" variants can get messy.\\nPlease review with design to make sure color contrast makes sense and \\\"on brand\\\"\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\n `0 0 0 3px ${theme.colors.pink.tint1}` }}\\n >\\n Magenta Button\\n \\n\\n `inset 0 0 0 1px ${theme.colors.yellow.shade3}`,\\n }}\\n _focus={{\\n bg: 'yellow.shade2',\\n color: 'content.inverse',\\n boxShadow: (theme) => `0 0 0 3px ${theme.colors.yellow.tint1}`,\\n }}\\n >\\n Mustard Outline Button\\n \\n\\n\")), mdx(\"h3\", {\n \"id\": \"props\"\n }, \"Props\"), mdx(PropTable, {\n of: \"Button\",\n docData: buttonDocs,\n system: ['box'],\n mdxType: \"PropTable\"\n }), mdx(\"h3\", {\n \"id\": \"accessibility\"\n }, \"Accessibility\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"When Button has focus, \", mdx(\"kbd\", null, \"Space\"), \" and \", mdx(\"kbd\", null, \"Enter\"), \" activates it.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If an \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"href\"), \" is passed, \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"