Button

Usage

The most simplest example of usage of the ShButton is with just an urlButton and the text to show.

ClickMe!!!

This is how it is written:

::ShButton
---
urlButton: 'https://www.nasa.gov/' # this is a comment to the link to the button.
---

ClickMe!!!  
::

This is a more advance example of usage the ShButton when some of the style is being modified:

ClickMe!!!

This is how it is written:

::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!!!  
::

The ShButton can be presented in solid, outline and link styleButton:

ClickMe!!!

::ShButton
---
urlButton: "#"
styleButton: solid
---
ClickMe!!!  
::

::ShButton
---
urlButton: "#"
styleButton: outline
---
ClickMe!!!  
::

::ShButton
---
urlButton: "#"
styleButton: link
---
ClickMe!!!  
::

The property size defines the size of the ShButton

2xs

base

2xl

3xl

4xl

5xl

::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.

This button takes the whole width

::ShButton
---
urlButton: "#"
fullWidth: true
colorButton: cyan
---
This button takes the whole width
::

The ShButton content can be any valid Markdown.

ClickMe!!!

it will take you to desirable destination

Combine Button with Other Constructors

It is possible to insert other constructors inside of the ShButton constructor. The other components are supported as well.

GitHub repository

In this repository all the content is Open Sounce and it's can be used accordigly to it's LICENSE.

::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.
    ::
  :::
::

There is a special way where the button can be part of the

text

using a inline notation for the components. This notation supports ShButton

all

styleButtons and all other parameters, colorButton for example.

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

These are the properties and attributes to define and style ShButton constructor

Properties & Attributes
Property	Attribute	Default	Description
`ui`	n/a	n/a	The `ui` property is a comprehensive configuration object that allows for the customization of various styling aspects of the button component. Each attribute within the `ui` property targets a specific part of the button's appearance and layout, providing detailed control over its design.
	`wrapper`	`config.wrapper`	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`	`config.inner`	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`
`urlButton`	n/a	n/a	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.
`labelButton`	n/a	n/a	Defines the text label displayed on the button. This attribute ensures the button conveys its intended action clearly to the user.
`target`	n/a	`_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`	n/a	`primary`	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.
`rounded`	n/a	`config.rounded`	Defines the border-radius of the button, making the edges rounded. The default class `rounded-md` provides medium-rounded corners.
`disabled`	n/a	`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`	n/a	`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`	n/a	`false`	A boolean attribute (`true`, `false`) defines whether the button should be displayed as a fullWidth element, taking the full width of its container.
`size`	n/a	`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.
`inline`	n/a	`config.inline`	Defines whether the button should be displayed inline with other elements. The class `inline-flex items-center` ensures the button aligns properly with the surrounding content. It is advised NOT to change these values.
`padding`	n/a	n/a	Sets the padding for the button, with options ranging from `2xs`, `xs`, `sm`, `md`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, to `5xl`. Each padding size corresponds to predefined padding values, ensuring the button's content is appropriately spaced. It is recommended to NOT modify these values as it is synced with the `size` property.
`description`	n/a	n/a	Intented to be used as a help to content writter. Doesn`t render on website.

Config

These style properties can be modified via ui and are stored in the ShButton.ts and status.ts files:

export default {
  wrapper: "align-middle m-1 hover:saturate-150",s
  inner: "text-center not-prose mx-auto",
  styleButton: {
    solid: 'bg-{colorButton}-500 dark:bg-{colorButton}-400 text-white dark:text-gray-900 no-underline',
    outline: 'text-{colorButton}-500 dark:text-{colorButton}-400 ring-1 ring-inset ring-{colorButton}-500 dark:ring-{colorButton}-400 no-underline',
    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'
  },
  fullWidth: 'flex mx-auto justify-center items-center',
  inline: 'inline-flex items-center',
  rounded: 'rounded-md',
  size: {
    '2xs': 'text-xs',
    xs: 'text-xs',
    sm: 'text-sm',
    md: 'text-md',
    base: 'text-base',
    lg: 'text-lg',
    xl: 'text-xl',
    '2xl': 'text-2xl',
    '3xl': 'text-3xl',
    '4xl': 'text-4xl',
    '5xl': 'text-5xl'
  },
  padding: {
    '2xs': 'px-1 py-1',
    xs: 'px-1.5 py-1.5',
    sm: 'px-2 py-2',
    md: 'px-2.5 py-2.5',
    base: 'px-3 py-3',
    lg: 'px-7 py-6',
    xl: 'px-8 py-7',
    '2xl': 'px-9 py-8',
    '3xl': 'px-10 py-9',
    '4xl': 'px-11 py-10',
    '5xl': 'px-12 py-11',
  },
  default: {
    size: 'base',
    styleButton: 'solid',
    colorButton: 'primary',
    target: '_blank',
  }
}

Class Descriptions

These represent the class values utilized in the ShButton constructor. These values are customizable and can be strengthened or overridden through the ui properties' attributes.

wrapper

Value: "align-middle m-1"
Description: Defines the alignment and margin for the container. The value "align-middle m-1" centers the element vertically (align-middle) and adds a margin of 1 unit (m-1).

inner

Value: "text-center not-prose mx-auto"
Description: Specifies styles for inner content. The value "text-center not-prose mx-auto" centers the text (text-center), excludes prose formatting (not-prose), and centers horizontally (mx-auto).

styleButton.solid

Value: 'bg-{colorButton}-500 dark:bg-{colorButton}-400 text-white dark:text-gray-900 no-underline'
Description: Defines styles for a solid button. The value includes background color based on {colorButton} (bg-{colorButton}-500, dark:bg-{colorButton}-400), white text color (text-white), dark mode text color (dark:text-gray-900), and no underline (no-underline).

styleButton.outline

Value: 'text-{colorButton}-500 dark:text-{colorButton}-400 ring-1 ring-inset ring-{colorButton}-500 dark:ring-{colorButton}-400 no-underline'
Description: Defines styles for an outlined button. The value includes text color based on {colorButton} (text-{colorButton}-500, dark:text-{colorButton}-400), an inset ring with color based on {colorButton} (ring-1 ring-inset ring-{colorButton}-500, dark:ring-{colorButton}-400), and no underline (no-underline).

styleButton.link

Value: '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'
Description: Defines styles for a link button. The value includes text color based on {colorButton} (text-{colorButton}-500, dark:text-{colorButton}-400), hover text color (hover:text-{colorButton}-600, dark:hover:text-{colorButton}-500), disabled text color (disabled:text-{colorButton}-500, dark:disabled:text-{colorButton}-400), underline offset (underline-offset-4), hover underline (hover:underline), and focus-visible ring with color based on {colorButton} (focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{colorButton}-500, dark:focus-visible:ring-{colorButton}-400).

fullWidth

Value: "w-full flex justify-center items-center"
Description: Defines styles for full width elements. The value "w-full flex justify-center items-center" makes the element take full width (w-full), centers it using flexbox (flex justify-center items-center).

inline

Value: "inline-flex items-center"
Description: Defines styles for inline elements. The value "inline-flex items-center" sets inline flex display (inline-flex) and centers items vertically (items-center).

rounded

Value: "rounded-md"
Description: Defines the border radius. The value "rounded-md" applies a medium border radius.

size

Value: { '2xs': 'text-xs', xs: 'text-xs', sm: 'text-sm', md: 'text-md', base: 'text-base', lg: 'text-lg', xl: 'text-xl', '2xl': 'text-2xl', '3xl': 'text-3xl', '4xl': 'text-4xl', '5xl': 'text-5xl' }
Description: Defines text sizes for various options. Each value represents a different text size class from extra small (text-xs) to five times extra large (text-5xl).

padding

Value: { '2xs': 'px-1 py-1', xs: 'px-1.5 py-1.5', sm: 'px-2 py-2', md: 'px-2.5 py-2.5', base: 'px-3 py-3', lg: 'px-7 py-6', xl: 'px-8 py-7', '2xl': 'px-9 py-8', '3xl': 'px-10 py-9', '4xl': 'px-11 py-10', '5xl': 'px-12 py-11', }
Description: Defines padding sizes for various options. Each value represents different padding classes for different sizes.

default

Value: { size: 'base', styleButton: 'solid', colorButton: 'primary', target: '_blank', }
Description: Defines default settings. The value includes default text size (size: 'base'), default button style (styleButton: 'solid'), default button color (colorButton: 'primary'), and default link target (target: '_blank').

These style properties ensure that the ShButton component is visually appealing and flexible, allowing for a wide range of customization to meet specific design requirements.

Badge

Display a short text to represent a status or a category.

Card

This constructor allows you to have image on one half of the card, and text with labels on the other one. Text and labels have full Markdown support.

Useful links

Newsletter

F.A.Q