Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. ---
  2. name: Button
  3. menu: Components
  4. ---
  5. import { Playground, Props } from 'docz'
  6. import Button from './Button'
  7. # Button
  8. Component for performing an action upon activation (e.g. when clicked).
  9. <Playground>
  10. <Button>Perform Action</Button>
  11. </Playground>
  12. ## Props
  13. <Props of={Button} />
  14. ## Usage Notes
  15. The default variant is `outline` as the `primary` variant is intended for
  16. the most essential call-to-action in a section or a page. Choose `primary`
  17. only if the component encapsulates the primary action of the view (e.g. log-in
  18. in a log-in form), else resort to using `outline` (specifying the prop is optional).
  19. The design of the button label is intended to be in uppercase as per the
  20. [Tesseract Design Guidelines](https://make.modal.sh/tesseract/design). Avoid using
  21. pronounceable initials in the button label, unless:
  22. - It is well-known.
  23. Initials such as URL and API are popular to a very wide selection of people. However,
  24. initials such as [SOAP (Simple Object Access Protocol)](https://en.wikipedia.org/wiki/SOAP)
  25. or [POST (power-on self test)](https://en.wikipedia.org/wiki/Power-on_self-test) may be
  26. confusing if not enough context is provided.
  27. - The context wherein the initials are used is clearly indicated.
  28. For example, using [cURL](https://en.wikipedia.org/wiki/CURL) (which would be displayed as "CURL") in a page that
  29. deals with cURL requests is acceptable.