Skip to content

Commit

Permalink
Update pst docs buttons (#1502)
Browse files Browse the repository at this point in the history
* call them button-links

* copy edit
  • Loading branch information
gabalafou committed Oct 16, 2023
1 parent feb2bc2 commit 78213ca
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions docs/user_guide/web-components.rst
Expand Up @@ -17,8 +17,8 @@ Below you can find some examples of the components created with the :code:`sphin

.. _badges-buttons:

Badges and buttons
==================
Badges and button-links
=======================

Here are some of the available badges:

Expand All @@ -29,7 +29,7 @@ Here are some of the available badges:
:bdg-secondary-line:`secondary outline`
:bdg-success-line:`success outline`

Here are some of the available buttons, also using semantic colors:
Here are some of the available button-style links, also using semantic colors:

.. grid:: auto

Expand Down Expand Up @@ -96,6 +96,16 @@ Here are some of the available buttons, also using semantic colors:

Dark

.. note::

`Sphinx Design buttons
<https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html>`__
are actually links, meaning they are rendered in HTML with ``<a>`` tags
instead of ``<button>``. Use them if you need a link to look like a button,
however, be aware that they do not follow accessibility best practices for
native button components such as using the correct `ARIA attributes
<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role>`__.

If in your site's `custom CSS file <custom-css>`_ you override the `CSS custom properties <css-variables>`_ ``--pst-color-*`` (where ``*`` is one of the semantic color names, such as ``primary``, ``danger``), badges and buttons will automatically use the custom color.

Cards
Expand Down

0 comments on commit 78213ca

Please sign in to comment.