Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

Button.mdx 1.4 KiB

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