-{"description":"\nCondensedButton is a button component that renders without padding. It is meant specifically for tight spaces, or areas where the button padding would prevent the button content from aligning correctly with other elements.\n\n```js\n---\ntype: example\n---\n<View display=\"block\" background=\"primary\" padding=\"small\">\n <CondensedButton>Click Me</CondensedButton>\n</View>\n```\n\nIn the following example, CondensedButton is used so that the button content can align with the rest of the table cell content.\n\n```js\n---\ntype: example\n---\n<Table caption='Tallest Roller Coasters'>\n <Table.Head>\n <Table.Row>\n <Table.ColHeader id=\"Roller Coaster\">\n Roller Coaster\n </Table.ColHeader>\n <Table.ColHeader id=\"Height\">\n Height\n </Table.ColHeader>\n <Table.ColHeader id=\"Amusement Park\">\n Amusement Park\n </Table.ColHeader>\n </Table.Row>\n </Table.Head>\n <Table.Body>\n <Table.Row>\n <Table.Cell>\n Kingda Ka<br />\n <CondensedButton>View Advanced Stats</CondensedButton>\n </Table.Cell>\n <Table.Cell>\n 456.0ft\n </Table.Cell>\n <Table.Cell>\n Six Flags Great America\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n Top Thrill Dragster<br />\n <CondensedButton>View Advanced Stats</CondensedButton>\n </Table.Cell>\n <Table.Cell>\n 420.0ft\n </Table.Cell>\n <Table.Cell>\n Cedar Point\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n Superman: Escape from Krypton<br />\n <CondensedButton>View Advanced Stats</CondensedButton>\n </Table.Cell>\n <Table.Cell>\n 415.0ft\n </Table.Cell>\n <Table.Cell>\n Six Flags Magic Mountain\n </Table.Cell>\n </Table.Row>\n </Table.Body>\n</Table>\n```\n","displayName":"CondensedButton","methods":[{"name":"handleRef","docblock":null,"modifiers":[],"params":[{"name":"el","optional":false,"type":{"name":"union","raw":"Element | null","elements":[{"name":"Element"},{"name":"null"}]}}],"returns":null},{"name":"focused","docblock":null,"modifiers":["get"],"params":[],"returns":null},{"name":"focus","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"children":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"Specifies the `CondensedButton` children."},"type":{"required":false,"tsType":{"name":"union","raw":"'button' | 'submit' | 'reset'","elements":[{"name":"literal","value":"'button'"},{"name":"literal","value":"'submit'"},{"name":"literal","value":"'reset'"}]},"description":"Specifies the type of the `CondensedButton`'s underlying html element.","defaultValue":{"value":"'button'","computed":false}},"size":{"required":false,"tsType":{"name":"union","raw":"'small' | 'medium' | 'large'","elements":[{"name":"literal","value":"'small'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'large'"}]},"description":"The size of the `CondensedButton`","defaultValue":{"value":"'medium'","computed":false}},"elementRef":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(element: Element | null) => void","signature":{"arguments":[{"type":{"name":"union","raw":"Element | null","elements":[{"name":"Element"},{"name":"null"}]},"name":"element"}],"return":{"name":"void"}}},"description":"Provides a reference to the `CondensedButton`'s underlying html element."},"as":{"required":false,"tsType":{"name":"AsElementType"},"description":"The element to render as the component root, `button` by default.","defaultValue":{"value":"'button'","computed":false}},"interaction":{"required":false,"tsType":{"name":"union","raw":"'enabled' | 'disabled' | 'readonly'","elements":[{"name":"literal","value":"'enabled'"},{"name":"literal","value":"'disabled'"},{"name":"literal","value":"'readonly'"}]},"description":"Specifies if interaction with the `CondensedButton` is enabled, disabled, or readonly.","defaultValue":{"value":"undefined","computed":true}},"color":{"required":false,"tsType":{"name":"union","raw":"'primary' | 'primary-inverse' | 'secondary'","elements":[{"name":"literal","value":"'primary'"},{"name":"literal","value":"'primary-inverse'"},{"name":"literal","value":"'secondary'"}]},"description":"Specifies the color for the `CondensedButton`.","defaultValue":{"value":"'primary'","computed":false}},"margin":{"required":false,"tsType":{"name":"Spacing"},"description":"Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,\n`small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via\nfamiliar CSS-like shorthand. For example: `margin=\"small auto large\"`.","defaultValue":{"value":"'0'","computed":false}},"cursor":{"required":false,"tsType":{"name":"Cursor"},"description":"Specify a mouse cursor to use when hovering over the button.\nThe `pointer` cursor is used by default.","defaultValue":{"value":"'pointer'","computed":false}},"href":{"required":false,"tsType":{"name":"string"},"description":"Specifies an href attribute for the `CondensedButton`'s underlying html element."},"renderIcon":{"required":false,"tsType":{"name":"union","raw":"React.ReactNode | (() => React.ReactNode)","elements":[{"name":"ReactReactNode","raw":"React.ReactNode"},{"name":"unknown"}]},"description":"An icon, or function that returns an icon."},"onClick":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(\n event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>\n) => void","signature":{"arguments":[{"type":{"name":"union","raw":"React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>","elements":[{"name":"ReactKeyboardEvent","raw":"React.KeyboardEvent<ViewProps>","elements":[{"name":"ViewProps"}]},{"name":"ReactMouseEvent","raw":"React.MouseEvent<ViewProps>","elements":[{"name":"ViewProps"}]}]},"name":"event"}],"return":{"name":"void"}}},"description":"Callback fired when the `CondensedButton` is clicked."},"display":{"required":false,"tsType":{"name":"union","raw":"'inline-block' | 'block'","elements":[{"name":"literal","value":"'inline-block'"},{"name":"literal","value":"'block'"}]},"description":"The CSS display property of the button, `inline-block` or `block`","defaultValue":{"value":"'inline-block'","computed":false}}},"category":"components","relativePath":"packages/ui-buttons/src/CondensedButton/v1/index.tsx","extension":".tsx","srcPath":"packages/ui-buttons/src/CondensedButton/v1/index.tsx","srcUrl":"https://github.com/instructure/instructure-ui/tree/master/packages/ui-buttons/src/CondensedButton/v1/index.tsx","packageName":"@instructure/ui-buttons","requirePath":"@instructure/ui-buttons/lib/CondensedButton/v1/index","requireStr":"require('/home/runner/work/instructure-ui/instructure-ui/packages/ui-buttons/src/CondensedButton/v1/index.tsx').default","esPath":"@instructure/ui-buttons/es/CondensedButton/v1/index","themePath":"packages/ui-buttons/src/CondensedButton/v1/styles.ts","themeUrl":"https://github.com/instructure/instructure-ui/tree/master/packages/ui-buttons/src/CondensedButton/v1/styles.ts","id":"CondensedButton","title":"CondensedButton","componentVersion":"v1","componentDirName":"CondensedButton"}
0 commit comments