useResponsiveValue

import React from 'react'
import {Button, IconButton, useResponsiveValue} from '@primer/react'
import {DownloadIcon} from '@primer/octicons-react'


export default function Default() {
  const label = useResponsiveValue(
    {
      narrow: null,
      regular: 'Download',
      wide: 'Download all assets',
    },
    'Download',
  )


  if (!label) {
    return <IconButton icon={DownloadIcon} aria-label="Download all assets" />
  }


  return <Button leadingVisual={DownloadIcon}>{label}</Button>
}