Hashtag

Hashtag is used to display home, project and other forms of IDs. They can be used as a link.

Hashtag Types

import React from 'react'

import { Hashtag } from 'playbook-ui'

const HashtagDefault = (props) => {
  return (
    <div>
      <Hashtag
          text="470297"
          type="project"
          url="https://google.com"
      />
      <br />
      <br />
      <Hashtag
          text="123456"
          type="home"
          url="https://google.com"
      />
      <br />
      <br />
      <Hashtag
          text="456789"
          type="appointment"
          url="https://google.com"
      />
      <br />
      <br />
      <Hashtag
          text="654321"
          type="default"
          url="https://google.com"
      />
    </div>
  )
}

export default HashtagDefault

Hashtag Links

Use the target prop to control whether the link opens on the same or a new tab (same page is the default behavior). You can use any web/standard values or a custom string to specify your link target.

import React from 'react'

import { Hashtag } from 'playbook-ui'

const HashtagLink = (props) => {
  return (
    <div>
      <Hashtag
          text="Open in the same window"
          type="project"
          url="https://google.com"
      />
      <br />
      <br />
      <Hashtag
          target="_blank"
          text="Open in a new window"
          type="project"
          url="https://google.com"
      />
    </div>
  )
}

export default HashtagLink

Things to Avoid

Do not use as a button.

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat