Button
Usage
Basic
The most simplest example of usage of the ShButton is with just an urlButton and the text to show.
::ShButton
---
urlButton: 'https://www.nasa.gov/' # this is a comment to the link to the button.
---
ClickMe!!!
::
Advanced settings
This is a more advance example of usage the ShButton when some of the style is being modified:
::ShButton
---
ui:
wrapper: shadow-2xl
rounded: rounded-full # options: rounded, rounded-md, rounded-lg & rounded-full
urlButton: https://www.nasa.gov/ # this is a comment to the link to the button.
target: "" # open in the same window
rounded: rounded-3xl
colorButton: green
disabled: true # true, false
styleButton: solid
fullWidth: "" # changes the button width
size: 3xl # modifies the size of the button
---
[]{.i-fa6-brands-square-github .text-4xl} ClickMe!!!
::
Button styles
The ShButton can be presented in solid, outline and link styleButton:
::ShButton
---
urlButton: "#"
styleButton: solid
---
ClickMe!!!
::
::ShButton
---
urlButton: "#"
styleButton: outline
---
ClickMe!!!
::
::ShButton
---
urlButton: "#"
styleButton: link
---
ClickMe!!!
::
The property size defines the size of the ShButton
::ShButton
---
urlButton: "#"
size: 2xs
---
2xs
::
::ShButton
---
urlButton: "#"
size: xs
---
xs
::
::ShButton
---
urlButton: "#"
size: sm
---
sm
::
::ShButton
---
urlButton: "#"
size: md
---
md
::
::ShButton
---
urlButton: "#"
size: base
---
base
::
::ShButton
---
urlButton: "#"
size: lg
---
lg
::
::ShButton
---
urlButton: "#"
size: xl
---
xl
::
::ShButton
---
urlButton: "#"
size: 2xl
---
2xl
::
::ShButton
---
urlButton: "#"
size: 3xl
---
3xl
::
::ShButton
---
urlButton: "#"
size: 4xl
---
4xl
::
::ShButton
---
urlButton: "#"
size: 5xl
---
5xl
::
Turning the parameter fullWidth to true you can instruct button to take the full width of available screen. And with colorButton
you can change the color of the button.
::ShButton
---
urlButton: "#"
fullWidth: true
colorButton: cyan
---
This button takes the whole width
::
Markdown content
The ShButton content can be any valid Markdown.
::ShButton
---
urlButton: "#"
---
ClickMe!!!
*it will take you to desirable destination*
::
Combine with other constructors
It is possible to insert other constructors inside of the ShButton constructor. The other components are supported as well.
::ShButton
---
urlButton: "https://opensource.org/"
styleButton: outline
colorButton: blue
fullWidth: true
---
:::ShMultiColumn
---
ui:
wrapper: w-full
cols: 8
---
[]{.i-fa6-brands-square-github .text-4xl}
::ShColumn
---
title: GitHub repository
subTitle: "*public*"
size: 2
---
::
::ShColumn
---
size: 5
---
In this repository all the content is Open Sounce and it's can be used accordigly to it's LICENSE.
::
:::
::
Inline button
There is a special way where the button can be part of the text, using an inline notation.
There is a special way where the button can be part of the
:ShButton{urlButton ="/" labelButton="text" colorButton="blue"} using a inline notation for the
components. This notation supports `ShButton` :ShButton{urlButton ="/" labelButton="all" styleButton="outline" colorButton="green"}
styleButtons and all other parameters, colorButton for example.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
description | string | "" | Note for content writers. It is not rendered on the website. |
urlButtonrequired | string | "" | Represents the URL to which the button will navigate when clicked. It can be used to define external or internal links for the button's action. |
target | string | "_blank" | Specifies where to open the linked document. Common values include `_self` for the same frame, `_blank` for a new window or tab, `_parent` for the parent frame, and `_top` for the full body of the window. |
colorButton | string | "oma-blue" | Determines the primary color scheme for the button. The value `primary` sets a default color, which can be customized by replacing `{colorButton}` in the styleButton styles with the desired color name. |
size | string | "base" | Sets the size of the button, ranging from `2xs`, `xs`, `sm`, `md`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, to `5xl`. Each size corresponds to predefined text and padding sizes, ensuring consistency across different button sizes. |
disabled | boolean | false | A boolean attribute (`true` or `false`) that indicates whether the button is disabled. When true, the button is not interactive and is usually styled to look inactive. |
styleButton | string | "solid" | Specifies the style styleButton of the button, which can be `solid`, `outline`, or `link`. Each styleButton applies different styling rules, such as background colors, border styles, and text decorations. |
fullWidth | boolean | false | A boolean attribute (`true`, `false`) defines whether the button should be displayed as a fullWidth element, taking the full width of its container. |
labelButton | string | "" | Defines the text label displayed on the button. This attribute ensures the button conveys its intended action clearly to the user. |
class | any | "" | Additional classes applied to the root element of the component. |
Slots
default
UI config
Default classes of every styled element. Override any key through the ui prop.
| Key | Default classes | Description |
|---|---|---|
wrapper | align-middle m-1 font-medium transition-colors duration-200 | Defines the overall styling for the container that holds all the elements of the button. The `wrapper` attribute is used to ensure the button is aligned properly within its container, with appropriate margins, e.g., `align-middle m-1` |
inner | text-center not-prose mx-auto | Specifies the styling for the inner content of the button, ensuring it is centered and does not inherit any prose-related styles, making it suitable for standalone button components, e.g., `text-center not-prose mx-auto` |
styleButton.solid | bg-{colorButton}-500 dark:bg-{colorButton}-400 text-white hover:bg-{colorButton}-700 dark:hover:bg-{colorButton}-300 hover:text-white dark:text-white dark:hover:text-white no-underline | `{colorButton}` is replaced with the `colorButton` prop; the class names this produces are kept in the Tailwind safelist in assets/css/main.css |
styleButton.outline | text-{colorButton}-500 dark:text-{colorButton}-400 hover:bg-{colorButton}-50 dark:hover:bg-{colorButton}-950 ring-1 ring-inset ring-{colorButton}-500 dark:ring-{colorButton}-400 no-underline | `{colorButton}` is replaced with the `colorButton` prop; the class names this produces are kept in the Tailwind safelist in assets/css/main.css |
styleButton.link | text-{colorButton}-500 hover:text-{colorButton}-600 disabled:text-{colorButton}-500 dark:text-{colorButton}-400 dark:hover:text-{colorButton}-500 dark:disabled:text-{colorButton}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{colorButton}-500 dark:focus-visible:ring-{colorButton}-400 | `{colorButton}` is replaced with the `colorButton` prop; the class names this produces are kept in the Tailwind safelist in assets/css/main.css |
colorButton.oma-blue.solid | bg-oma-blue-300 hover:bg-oma-blue-400 dark:bg-oma-blue-500 dark:hover:bg-oma-blue-400 text-white hover:text-white dark:text-white dark:hover:text-white no-underline | Custom color schemes that bring their own classes for each `styleButton`, instead of the `{colorButton}` template. |
