Button

To create a button, add the GenshiButton class to a button:

<button type="button" class="GenshiButton">Click me</button>

Click me

However, if you want to use a button to change the browser URL, you can also add the GenshiButton class to a link. It is important to always remember the semantic distinction between using <a> and using <button>.

<a href="https://github.com/makigas/genshi" target="_blank" class="GenshiButton">
  Star repo on GitHub
</a>

Star repo on GitHub

Button sizes

Buttons come in a variety of sizes. Choose the one of your wish:

<button type="button" class="GenshiButton GenshiButton--xs">Extra small</button>
<button type="button" class="GenshiButton GenshiButton--sm">Small</button>
<button type="button" class="GenshiButton GenshiButton--md">Medium (default)</button>
<button type="button" class="GenshiButton GenshiButton--lg">Large</button>
<button type="button" class="GenshiButton GenshiButton--xl">Extra large</button>

Extra small Small Medium (default) Large Extra large

Bold button

While this design system doesn’t use outlined buttons, and every button has a background, by default the buttons will look like blended with the background. If you want to make the button stand out, mark it as bold, by using the GenshiButton--bold class:

<button class="GenshiButton GenshiButton--bold">Back</button>

Back

Color buttons

You can add some accent to the buttons by using one of the semantic classes. There are currently two classes:

Use GenshiButton--suggested to convey the primary button, or the button that may complete a task.

<button class="GenshiButton GenshiButton--suggested">Save</button>
<button class="GenshiButton GenshiButton--suggested GenshiButton--bold">Submit</button>

Save Submit

Use GenshiButton--destructive to convey the dangerous button, which is often used to mark that pressing a button will have important consequences such as the destruction of records.

<button class="GenshiButton GenshiButton--destructive">Revert</button>
<button class="GenshiButton GenshiButton--destructive GenshiButton--bold">Delete</button>

Revert Delete

Buttons with icons

The button component is compatible with symbolic icons, such as the ones provided by libraries like Feather, Lucide and similar, as long as these are added semantically.

To add an icon to the button simply add the node before or after the text. You can also omit the text, but please make sure to add an aria-label attribute at the <button> for accessibility purposes. (I shouldn’t be the one telling you here…)

Like Play video Delete

Disabled buttons

Simply add the disabled attribute to the button tag to mark it as disabled.

<button type="button" disabled class="GenshiButton">Can't touch this</button>