The "as" property

Sometimes you may want to use a component but the resulting HTML tag is not the good one. Or you want to use a Button with another component like the Link from React Router.

Usage

Every components accepts a forwardedAs property, it defines the underlying component used in each component.

An example of an Alert that uses span as a component.

A span alert
import React from 'react'
import { Alert } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Alert forwardedAs="span" variant="primary">
      A span alert
    </Alert>
  )
}

render(<Example />)
import React from 'react'
import { Alert } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Alert forwardedAs="span" variant="primary">
      A span alert
    </Alert>
  )
}
render(<Example />)

The as property is reserved to styled-components, use forwardedAs to replace the underlying component.