{
    "componentChunkName": "component---src-layouts-rails-component-layout-tsx",
    "path": "/components/icon-button/rails/beta",
    "result": {"data":{"primerRailsVersion":{"version":"0.24.1"},"sitePage":{"path":"/components/icon-button","context":{"frontmatter":{"title":"Icon button","description":"Icon button is used for buttons that show an icon in place of a text label.","reactId":"icon_button","railsIds":["Primer::Beta::IconButton","Primer::IconButton"],"figmaId":null,"cssId":null}}},"allRailsComponent":{"nodes":[{"railsId":"Primer::Alpha::ActionBar","status":"alpha"},{"railsId":"Primer::Alpha::ActionList","status":"alpha"},{"railsId":"Primer::Alpha::ActionMenu","status":"alpha"},{"railsId":"Primer::Alpha::AutoComplete","status":"deprecated"},{"railsId":"Primer::Alpha::Banner","status":"alpha"},{"railsId":"Primer::Alpha::ButtonMarketing","status":"alpha"},{"railsId":"Primer::Alpha::CheckBox","status":"alpha"},{"railsId":"Primer::Alpha::CheckBoxGroup","status":"alpha"},{"railsId":"Primer::Alpha::Dialog","status":"alpha"},{"railsId":"Primer::Alpha::Dropdown","status":"alpha"},{"railsId":"Primer::Alpha::FormButton","status":"alpha"},{"railsId":"Primer::Alpha::FormControl","status":"alpha"},{"railsId":"Primer::Alpha::HellipButton","status":"alpha"},{"railsId":"Primer::Alpha::HiddenTextExpander","status":"alpha"},{"railsId":"Primer::Alpha::Image","status":"alpha"},{"railsId":"Primer::Alpha::ImageCrop","status":"alpha"},{"railsId":"Primer::Alpha::Layout","status":"alpha"},{"railsId":"Primer::Alpha::Menu","status":"alpha"},{"railsId":"Primer::Alpha::MultiInput","status":"alpha"},{"railsId":"Primer::Alpha::NavList","status":"deprecated"},{"railsId":"Primer::Alpha::Navigation::Tab","status":"alpha"},{"railsId":"Primer::Alpha::OcticonSymbols","status":"alpha"},{"railsId":"Primer::Alpha::Overlay","status":"alpha"},{"railsId":"Primer::Alpha::RadioButton","status":"alpha"},{"railsId":"Primer::Alpha::RadioButtonGroup","status":"alpha"},{"railsId":"Primer::Alpha::SegmentedControl","status":"alpha"},{"railsId":"Primer::Alpha::Select","status":"alpha"},{"railsId":"Primer::Alpha::SubmitButton","status":"alpha"},{"railsId":"Primer::Alpha::TabContainer","status":"alpha"},{"railsId":"Primer::Alpha::TabNav","status":"alpha"},{"railsId":"Primer::Alpha::TabPanels","status":"alpha"},{"railsId":"Primer::Alpha::TextArea","status":"alpha"},{"railsId":"Primer::Alpha::TextField","status":"alpha"},{"railsId":"Primer::Alpha::ToggleSwitch","status":"alpha"},{"railsId":"Primer::Alpha::Tooltip","status":"alpha"},{"railsId":"Primer::Alpha::UnderlineNav","status":"alpha"},{"railsId":"Primer::Alpha::UnderlinePanels","status":"alpha"},{"railsId":"Primer::Beta::AutoComplete","status":"beta"},{"railsId":"Primer::Beta::Avatar","status":"beta"},{"railsId":"Primer::Beta::AvatarStack","status":"beta"},{"railsId":"Primer::Beta::BaseButton","status":"beta"},{"railsId":"Primer::Beta::Blankslate","status":"beta"},{"railsId":"Primer::Beta::BorderBox","status":"beta"},{"railsId":"Primer::Beta::Breadcrumbs","status":"beta"},{"railsId":"Primer::Beta::Button","status":"beta"},{"railsId":"Primer::Beta::ButtonGroup","status":"beta"},{"railsId":"Primer::Beta::ClipboardCopy","status":"beta"},{"railsId":"Primer::Beta::ClipboardCopyBaseButton","status":"beta"},{"railsId":"Primer::Beta::ClipboardCopyButton","status":"beta"},{"railsId":"Primer::Beta::CloseButton","status":"beta"},{"railsId":"Primer::Beta::Counter","status":"beta"},{"railsId":"Primer::Beta::Details","status":"beta"},{"railsId":"Primer::Beta::Flash","status":"deprecated"},{"railsId":"Primer::Beta::Heading","status":"beta"},{"railsId":"Primer::Beta::IconButton","status":"beta"},{"railsId":"Primer::Beta::Label","status":"beta"},{"railsId":"Primer::Beta::Link","status":"beta"},{"railsId":"Primer::Beta::Markdown","status":"beta"},{"railsId":"Primer::Beta::NavList","status":"beta"},{"railsId":"Primer::Beta::Octicon","status":"beta"},{"railsId":"Primer::Beta::Popover","status":"beta"},{"railsId":"Primer::Beta::ProgressBar","status":"beta"},{"railsId":"Primer::Beta::RelativeTime","status":"beta"},{"railsId":"Primer::Beta::Spinner","status":"beta"},{"railsId":"Primer::Beta::State","status":"beta"},{"railsId":"Primer::Beta::Subhead","status":"beta"},{"railsId":"Primer::Beta::Text","status":"beta"},{"railsId":"Primer::Beta::TimelineItem","status":"beta"},{"railsId":"Primer::Beta::Truncate","status":"beta"},{"railsId":"Primer::BlankslateComponent","status":"deprecated"},{"railsId":"Primer::Box","status":"stable"},{"railsId":"Primer::ButtonComponent","status":"deprecated"},{"railsId":"Primer::ConditionalWrapper","status":"alpha"},{"railsId":"Primer::Content","status":"stable"},{"railsId":"Primer::IconButton","status":"deprecated"},{"railsId":"Primer::LayoutComponent","status":"deprecated"},{"railsId":"Primer::Navigation::TabComponent","status":"deprecated"},{"railsId":"Primer::Tooltip","status":"deprecated"},{"railsId":"Primer::Truncate","status":"deprecated"},{"railsId":"Primer::BaseComponent","status":null}]},"railsComponent":{"name":"IconButton","railsId":"Primer::Beta::IconButton","description":"Use `IconButton` to render Icon-only buttons without the default button styles.\n\n`IconButton` will always render with a tooltip unless the tag is `:summary`.","status":"beta","a11y_reviewed":false,"short_name":"IconButton","is_form_component":false,"accessibility_docs":"`IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.\nThe `aria-label` should describe the action to be invoked rather than the icon itself. For instance,\nif your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be\n`\"Search\"` instead of `\"Magnifying glass\"`.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\n[Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)","props":[{"name":"icon","type":"String","description":"Name of {{link_to_octicons}} to use.","default":"N/A"},{"name":"tag","type":"Symbol","description":"One of `:a`, `:button`, `:clipboard-copy`, or `:summary`.","default":"N/A"},{"name":"scheme","type":"Symbol","description":"One of `:danger`, `:default`, `:invisible`, `:primary`, or `:secondary`.","default":"`:default`"},{"name":"size","type":"Symbol","description":"One of `:large`, `:medium`, or `:small`.","default":"`:medium`"},{"name":"disabled","type":"Boolean","description":"Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.","default":"`false`"},{"name":"type","type":"Symbol","description":"One of `:button`, `:reset`, or `:submit`.","default":"N/A"},{"name":"aria-label","type":"String","description":"String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.","default":"N/A"},{"name":"aria-description","type":"String","description":"String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.","default":"N/A"},{"name":"show_tooltip","type":"Boolean","description":"Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition.","default":"`true`"},{"name":"tooltip_direction","type":"Symbol","description":"One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`.","default":"`:s`"},{"name":"system_arguments","type":"Hash","description":"{{link_to_system_arguments_docs}}","default":"N/A"}],"slots":[],"methods":[],"previews":[{"name":"playground","preview_path":"primer/beta/icon_button/playground"},{"name":"default","preview_path":"primer/beta/icon_button/default"},{"name":"invisible","preview_path":"primer/beta/icon_button/invisible"},{"name":"primary","preview_path":"primer/beta/icon_button/primary"},{"name":"danger","preview_path":"primer/beta/icon_button/danger"}],"subcomponents":[]}},"pageContext":{"componentId":"Primer::Beta::IconButton","parentPath":"/components/icon-button"}},
    "staticQueryHashes": ["1056354862","2102389209","2745756513","2790671566","2939673985","3235046957","3907230164"]}