Tags

Close

import React from 'react'
import Badge from '../_badge'

const BadgeDefault = (props) => {
  return (
    <div>
      <Badge
          text="+1"
          variant="primary"
          {...props}
      />

      &nbsp;

      <Badge
          text="+4"
          variant="primary"
          {...props}
      />

      &nbsp;

      <Badge
          text="+1000"
          variant="primary"
          {...props}
      />
    </div>
  )
}

export default BadgeDefault

Close

import React from 'react'
import Badge from '../_badge'

const BadgeRounded = (props) => {
  return (
    <div>
      <Badge
          rounded
          text="+1"
          variant="primary"
          {...props}
      />

      &nbsp;

      <Badge
          rounded
          text="+4"
          variant="primary"
          {...props}
      />

      &nbsp;

      <Badge
          rounded
          text="+1000"
          variant="primary"
          {...props}
      />
    </div>
  )
}

export default BadgeRounded

Close

import React from 'react'
import Badge from '../_badge'

const BadgeColors = (props) => {
  return (
    <div>
      <div>
        <Badge
            rounded
            text="+1"
            variant="primary"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="primary"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="primary"
            {...props}
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="success"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="success"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="success"
            {...props}
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="warning"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="warning"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="warning"
            {...props}
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="error"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="error"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="error"
            {...props}
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="info"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="info"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="info"
            {...props}
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="neutral"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="neutral"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="neutral"
            {...props}
        />
      </div>
    </div>
  )
}

export default BadgeColors

Close

import React from 'react'
import { Hashtag } from '../../'

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

export default HashtagDefault

Close

import React from 'react'
import { Hashtag } from '../../'

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

export default HashtagLink

Close

import React from 'react'
import Pill from '../_pill'

const PillDefault = (props) => {
  return (
    <div>
      <Pill
          text="default"
          {...props}
      />
    </div>
  )
}

export default PillDefault

Close

import React from 'react'
import Pill from '../_pill'

const PillVariants = (props) => {
  return (
    <div>
      <Pill
          text="success"
          variant="success"
          {...props}
      />

      <Pill
          text="error"
          variant="error"
          {...props}
      />

      <Pill
          text="warning"
          variant="warning"
          {...props}
      />

      <Pill
          text="info"
          variant="info"
          {...props}
      />

      <Pill
          text="neutral"
          variant="neutral"
      />

      <Pill
          text="primary"
          variant="primary"
          {...props}
      />
    </div>
  )
}

export default PillVariants

Close

import React from 'react'
import Pill from '../_pill'

const PillExample = (props) => {
  return (
    <div>
      <Pill
          text="Success"
          textTransform="none"
          variant="success"
          {...props}
      />
    </div>
  )
}

export default PillExample