PlainButton

Demos

Default

Fullscreen
import { Icon, PlainButton } from 'marketing-ui'
import { IconArrowUp } from 'icons'

function Demo() {
  return (
    <PlainButton
      aria-label='Arrow up'
      iconStart={<Icon i={IconArrowUp} />}
    />
  )
}

export default Demo

Default Label

Fullscreen
import { Icon, PlainButton } from 'marketing-ui'
import { IconArrowUp } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <PlainButton label='Label' iconStart={<Icon i={IconArrowUp} />} />
      <PlainButton label='Label' iconEnd={<Icon i={IconArrowUp} />} />
      <PlainButton
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
        iconEnd={<Icon i={IconArrowUp} />}
      />
    </div>
  )
}

export default Demo

Default Label Disabled

Fullscreen
import { Icon, PlainButton } from 'marketing-ui'
import { IconArrowUp } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <PlainButton
        disabled
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        disabled
        label='Label'
        iconEnd={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        disabled
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
        iconEnd={<Icon i={IconArrowUp} />}
      />
    </div>
  )
}

export default Demo

Small

Fullscreen
import { Icon, PlainButton } from 'marketing-ui'
import { IconArrowUp } from 'icons'

function Demo() {
  return (
    <PlainButton
      aria-label='Arrow up'
      size='small'
      iconStart={<Icon i={IconArrowUp} />}
    />
  )
}

export default Demo

Small Label

Fullscreen
import { Icon, PlainButton } from 'marketing-ui'
import { IconArrowUp } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <PlainButton
        size='small'
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        size='small'
        label='Label'
        iconEnd={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        size='small'
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
        iconEnd={<Icon i={IconArrowUp} />}
      />
    </div>
  )
}

export default Demo

Small Label Disabled

Fullscreen
import { Icon, PlainButton } from 'marketing-ui'
import { IconArrowUp } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <PlainButton
        size='small'
        disabled
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        size='small'
        disabled
        label='Label'
        iconEnd={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        disabled
        size='small'
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
        iconEnd={<Icon i={IconArrowUp} />}
      />
    </div>
  )
}

export default Demo

White

Fullscreen
import { Icon, PlainButton } from 'marketing-ui'
import { IconArrowUp } from 'icons'

function Demo() {
  return (
    <div
      style={{
        display: 'flex',
        gap: '1rem',
        flexWrap: 'wrap',
        padding: '1rem',
        background: 'var(--sonax-red-100)',
      }}
    >
      <PlainButton
        aria-label='Arrow up'
        variant='white'
        iconStart={<Icon i={IconArrowUp} />}
      />
    </div>
  )
}

export default Demo

White Label

Fullscreen
import { Icon, PlainButton } from 'marketing-ui'
import { IconArrowUp } from 'icons'

function Demo() {
  return (
    <div
      style={{
        display: 'flex',
        gap: '1rem',
        flexWrap: 'wrap',
        padding: '1rem',
        background: 'var(--sonax-red-100)',
      }}
    >
      <PlainButton
        variant='white'
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        variant='white'
        label='Label'
        iconEnd={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        variant='white'
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
        iconEnd={<Icon i={IconArrowUp} />}
      />
    </div>
  )
}

export default Demo

White Label Disabled

Fullscreen
import { Icon, PlainButton } from 'marketing-ui'
import { IconArrowUp } from 'icons'

function Demo() {
  return (
    <div
      style={{
        display: 'flex',
        gap: '1rem',
        flexWrap: 'wrap',
        padding: '1rem',
        background: 'var(--sonax-red-100)',
      }}
    >
      <PlainButton
        variant='white'
        disabled
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        variant='white'
        disabled
        label='Label'
        iconEnd={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        variant='white'
        disabled
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
        iconEnd={<Icon i={IconArrowUp} />}
      />
    </div>
  )
}

export default Demo

Default Inverted

Fullscreen
import { Icon, PlainButton } from 'marketing-ui'
import { IconArrowUp } from 'icons'

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

export default Demo

Small Inverted

Fullscreen
import { Icon, PlainButton } from 'marketing-ui'
import { IconArrowUp } from 'icons'

function Demo() {
  return (
    <div
      style={{
        display: 'flex',
        gap: '1rem',
        flexWrap: 'wrap',
        padding: '1rem',
        background: 'var(--road-black-100)',
      }}
    >
      <PlainButton
        aria-label='Arrow up'
        size='small'
        variant='invert'
        iconStart={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        size='small'
        variant='invert'
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        size='small'
        variant='invert'
        label='Label'
        iconEnd={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        size='small'
        variant='invert'
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
        iconEnd={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        size='small'
        variant='invert'
        disabled
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        size='small'
        variant='invert'
        disabled
        label='Label'
        iconEnd={<Icon i={IconArrowUp} />}
      />
      <PlainButton
        disabled
        size='small'
        variant='invert'
        label='Label'
        iconStart={<Icon i={IconArrowUp} />}
        iconEnd={<Icon i={IconArrowUp} />}
      />
    </div>
  )
}

export default Demo

Props