Link

React link component (a or NavLink).

Usage

Example

Normal external link.
Disabled link without action
Custom link.Normal external link
Disabled link without action
Custom link

Script


  return (
    <div>
      <CRow>
        <CCol>
          <CLink
            href="https://coreui.io"
            target="_blank"
          >
            Normal external link.
          </CLink>
          <br />
          <CLink disabled>
            Disabled link without action
          </CLink>
          <br />
          <CLink
            className="text-white bg-info px-2"
            href="https://coreui.io"
            target="_blank"
          >
            Custom link.
          </CLink>

          <CLink
            href="https://coreui.io"
            target="_blank"
          >
            Normal external link
          </CLink>
          <br />
          <CLink disabled>
            Disabled link without action
          </CLink>
          <br />
          <CLink
            className="text-white bg-info px-2"
            href="https://coreui.io"
            target="_blank"
          >
            Custom link
          </CLink>

        </CCol>
      </CRow>
    </div>
  )

# Features

Linking to external sources or router-links
If link is empty, component prevents scrolling up the page after clicking

To turn link into router-link just pass address in 'to' prop instead of 'href'. Then component will become router link extended by base 'CLink' props.

# Link API

Name	Required	Type	Default Value
innerRef		(object \| Function \| string)
ref to the main tag
active		boolean
set link to active
href		string
href HTML attribute of link
onClick		Function
on click callback
disabled		boolean
disable link
className		(string \| any[])
user classes for the main HTML tag
to		(object \| string \| Function)
link to the application page specified as router-link