Square button

A fixed-size square link whose label is a short text or a number — text only, no markup, because Windows Outlook gets a copy written as raw HTML — as the feedback block's 1–10 rating scale draws each number. Every number it draws and its default colours come from buttonSquare in lib/button.ts; resolveButtonSquare validates the props.

Examples

Square button

A 1 to 10 rating scale of numbered squares, with a grey, a primary and an accent border.

44.7 KB built. Open the built email (opens in a new tab)

const href = 'https://email.designsystem.nsw.gov.au'

const ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const borders: readonly ColorName[] = ['grey-300', 'primary-300', 'accent-300']

const gap = 4

const ratingScaleStyle = [
  '@media only screen and (max-width: ' + mobileBreakpoint(layout) + 'px) {',
  '  .rating-scale-table { display: block !important; width: 100% !important; margin: 0 auto !important; text-align: center !important; }',
  '  .rating-scale-row { display: block !important; width: 100% !important; font-size: 0 !important; text-align: center !important; }',
  '  .rating-box { display: inline-block !important; width: 20% !important; vertical-align: top !important; text-align: center !important; font-size: 14px !important; padding: 0 0 ' +
    gap +
    'px 0 !important; }',
  '  .rating-box a { margin: 0 auto !important; }',
  '}',
].join('\n');

<NswLayout title='Square button' headStyle={ratingScaleStyle}>
  {borders.map((borderColor) => (
    <NswColumns key={borderColor}>
      <NswColumn>
        <NswSpacer height={16} />
        <table
          className='rating-scale-table'
          role='presentation'
          cellPadding='0'
          cellSpacing='0'
        >
          <tbody>
            <tr className='rating-scale-row'>
              {ratings.map((rating, index) => (
                <td
                  key={rating}
                  className='rating-box'
                  style={{
                    padding: '0 ' + (index < ratings.length - 1 ? gap : 0) + 'px 0 0',
                    verticalAlign: 'top',
                  }}
                >
                  <NswButtonSquare href={href + '?rating=' + rating} borderColor={borderColor}>
                    {rating}
                  </NswButtonSquare>
                </td>
              ))}
            </tr>
          </tbody>
        </table>
        <NswSpacer height={16} />
      </NswColumn>
    </NswColumns>
  ))}
</NswLayout>

Props

Props of NswButtonSquare, read from the component
Prop	Type	Default	Description
`href` (required)	`string`	—	Where the square links to. Required; an empty link throws.
`devices`	`Devices`	—	Which devices show the square: left out, every device; `desktop` hides it on a phone (`hide-on-mobile`); `mobile` shows it on a phone only — hidden inline everywhere else, shown as a block by the document's `.show-on-mobile-block` rule (not `.show-on-mobile`, whose inherited line height would move the label off centre), and kept whole from Windows Outlook: the `<!--[if !mso]>` comments around it take Word's own VML copy with them (see `src/lib/devices.ts`, `flattenOutlookComments`).
`size`	`number`	44	The square's side in whole px, inside its 2px border. Default 44.
`fontSize`	`number`	16	The label's size in whole px, no larger than `size`; a label too long to fit the square at this size throws. Default 16.
`background`	`ColorValue`	`white`	The square's fill: a theme colour name or a hex literal, or `'transparent'` to let its row show through; anything else throws (see `resolveColor`). A fill other than the default white drops the hover tint, which would replace it. Default `white`.
`borderColor`	`ColorValue`	`grey-300`	The border colour: a theme colour name or a hex literal; `'transparent'` and anything else throws. Default `grey-300`.
`color`	`ColorValue`	`grey-900`	The label colour: a theme colour name or a hex literal; `'transparent'` and anything else throws. Default `grey-900`.