Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
__snapshots__ DEV: FIX glamorous warning while testing Jan 16, 2019
__tests__ UPDATE: Add ref to Button, ButtonLink Feb 18, 2019
ButtonLink.stories.js
README.md UPDATE: Add ref to Button, ButtonLink Feb 18, 2019
consts.js
index.js UPDATE: Add ref to Button, ButtonLink Feb 18, 2019
index.js.flow

README.md

ButtonLink

To implement ButtonLink component into your project you'll need to add the import:

import ButtonLink from "@kiwicom/orbit-components/lib/ButtonLink";

After adding import into your project you can use it simply like:

<ButtonLink>Hello World!</ButtonLink>

Props

Table below contains all types of the props available in ButtonLink component.

Name Type Default Description
block boolean false If true, the ButtonLink will grow up to the full width of its container.
circled boolean false If true, the ButtonLink will have circular shape.
children React.Node The content of the ButtonLink. See Functional specs
component string | React.Node "button" The component used for the root node. Either a string to use a DOM element or a component.
disabled boolean false If true, the ButtonLink will be disabled.
dataTest string Optional prop for testing purposes.
external boolean false If true, the ButtonLink opens link in a new tab. See Functional specs
href string The URL of link to open when ButtonLink is clicked. See Functional specs
icon React.Node The displayed icon on the left (will be removed in the future, use iconLeft instead).
iconLeft React.Node The displayed icon on the left.
iconRight React.Node The displayed icon on the right.
onClick event => void | Promise Function for handling onClick event.
ref func Prop for forwarded ref of the Button.
size enum "normal" The size of the ButtonLink.
submit boolean false If true, the Button will have type="submit" attribute, otherwise type="button".
transparent boolean false If true, the ButtonLink will not have :hover and :active state.
type enum "primary" The type of ButtonLink.
width number 0 The width of the ButtonLink. Number is defined in px.

enum

type size
"primary" "small"
"secondary" "normal"
"large"

Functional specs

  • When the external is specified, noopener and noreferrer values will automatically added to attribute rel for security reason.

  • By passing the href prop into Button, it will render into a element. If you pass component prop it will override this logic.

  • If you want to render Icon only ButtonLink, you just need to let children prop empty and set up any icon you want to use.

  • If you want to use the component prop then YourComponent should accept at least className. Otherwise it won't be rendered with proper styling, e.g.:

const YourComponent = props => <div {...props} />

<ButtonLink component={YourComponent}>Title</ButtonLink>

If you specify the children of YourComponent component, it will override the children prop of Button component, e.g.:

const YourComponent = props => <div {...props}>YourComponent</div>
 
<ButtonLink component={YourComponent}>Title</ButtonLink>

This example will render ButtonLink in div with children YourComponent and not Title.