Facette

import { Facette } from 'marketing-ui'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <Facette
        href='#'
        label='Black'
        color='#111111'
        active
        aria-label='Black'
      />
      <Facette href='#' label='Red' color='#e30613' aria-label='Red' />
      <Facette
        href='#'
        label='Silver'
        color='#c0c0c0'
        disabled
        aria-label='Silver'
      />
    </div>
  )
}

export default Demo

import { Facette } from 'marketing-ui'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <Facette
        href='#'
        label='Matte'
        active
        aria-label='Matte'
        image={
          <img
            src='https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg?auto=compress&cs=tinysrgb&w=80'
            alt=''
          />
        }
      />
      <Facette
        href='#'
        label='Gloss'
        aria-label='Gloss'
        image={
          <img
            src='https://images.pexels.com/photos/3354648/pexels-photo-3354648.jpeg?auto=compress&cs=tinysrgb&w=80'
            alt=''
          />
        }
      />
    </div>
  )
}

export default Demo

import { Facette } from 'marketing-ui'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <Facette href='#' label='250 ml' active />
      <Facette href='#' label='750 ml' />
      <Facette href='#' label='5 L' disabled />
    </div>
  )
}

export default Demo