Button

import { Button, Icon } from 'marketing-ui'
import { IconBarsThree } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <Button
        aria-label='Menu'
        variant='white'
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        variant='white'
        label='Label'
        iconStart={<Icon i={IconBarsThree} />}
      />
    </div>
  )
}

export default Demo

import { Button, Icon } from 'marketing-ui'
import { IconBarsThree } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <Button
        variant='white'
        label='Label'
        badge={5}
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        variant='white'
        label='Label'
        badge={5}
        iconEnd={<Icon i={IconBarsThree} />}
      />
    </div>
  )
}

export default Demo

import { Button, Icon } from 'marketing-ui'
import { IconBarsThree } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <Button
        variant='white'
        disabled
        label='Label'
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        variant='white'
        disabled
        label='Label'
        badge={5}
        iconEnd={<Icon i={IconBarsThree} />}
      />
    </div>
  )
}

export default Demo

import { Button, Icon } from 'marketing-ui'
import { IconBarsThree } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <Button
        aria-label='Menu'
        variant='ghost'
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        variant='ghost'
        label='Label'
        iconStart={<Icon i={IconBarsThree} />}
      />
    </div>
  )
}

export default Demo

import { Button, Icon } from 'marketing-ui'
import { IconBarsThree } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <Button
        variant='ghost'
        label='Label'
        badge={5}
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        variant='ghost'
        label='Label'
        badge={5}
        iconEnd={<Icon i={IconBarsThree} />}
      />
    </div>
  )
}

export default Demo

import { Button, Icon } from 'marketing-ui'
import { IconBarsThree } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <Button
        variant='ghost'
        disabled
        label='Label'
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        variant='ghost'
        disabled
        label='Label'
        badge={5}
        iconEnd={<Icon i={IconBarsThree} />}
      />
    </div>
  )
}

export default Demo

import { Button, Icon } from 'marketing-ui'
import { IconBarsThree } from 'icons'

function Demo() {
  return (
    <div
      style={{
        display: 'flex',
        gap: '1rem',
        flexWrap: 'wrap',
        padding: '1rem',
        background: 'var(--road-black-100)',
      }}
    >
      <Button
        aria-label='Menu'
        variant='invert'
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        variant='invert'
        label='Label'
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        variant='invert'
        label='Label'
        badge={5}
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        variant='invert'
        label='Label'
        badge={5}
        iconEnd={<Icon i={IconBarsThree} />}
      />
      <Button
        variant='invert'
        disabled
        label='Label'
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        variant='invert'
        disabled
        label='Label'
        badge={5}
        iconEnd={<Icon i={IconBarsThree} />}
      />
    </div>
  )
}

export default Demo

import { Button, Icon } from 'marketing-ui'
import { IconBarsThree } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <Button aria-label='Menu' iconStart={<Icon i={IconBarsThree} />} />
      <Button label='Label' iconStart={<Icon i={IconBarsThree} />} />
      <Button
        label='Label'
        badge={5}
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        label='Label'
        badge={5}
        iconEnd={<Icon i={IconBarsThree} />}
      />
      <Button
        disabled
        label='Label'
        iconStart={<Icon i={IconBarsThree} />}
      />
      <Button
        disabled
        label='Label'
        badge={5}
        iconEnd={<Icon i={IconBarsThree} />}
      />
    </div>
  )
}

export default Demo