PDS proposals
← All proposals

Send Button

A square, filled icon button (primary Button colors, IconButton shape and sizes) with three states:

Net-new componentOpen in Storybook

proposals/SendButton/custom.md29 lines · View on GitHub

Custom and net-new: SendButton

Everything in this proposal that is not plain PDS v2. npm run check:tokens reads this file: each net-new class, custom CSS variable and raw value found in the code must appear here in backticks.

Net-new components

  • .pds-send-button — Square filled button with send / working / stop states.
    • Parts and modifiers: .pds-send-button--m, .pds-send-button--xs, .pds-send-button__content

Additions to existing PDS components

None.

Net-new props

All props of SendButtonProps are new (net-new component).

Custom CSS variables

  • --send-button-background — set on .pds-send-button
  • --send-button-background-active — set on .pds-send-button
  • --send-button-background-hover — set on .pds-send-button
  • --send-button-foreground — set on .pds-send-button
  • --send-button-size — set on .pds-send-button

Raw values kept on purpose

None.