Button Base

Component

Button Base

- html

<!-- COMPONENT-START: nc-button -->
<button class="nc-button">
    Standard button
</button>
<!-- COMPONENT-END: nc-button -->

/* Minimum CSS for Button Base */
@import "@nordcode/ui/colors";
@import "@nordcode/ui/utils/theme";
@import "@nordcode/ui/components/button"

Link to section titled: Usage notes

Usage notes

Primary buttons should be used only once per form / view, while the others can be used multiple times.
When labeling, prefer strong verbs describing the action.
Don't use buttons for navigation. Prefer standard links for that.
Don't use undescriptive button texts, like OK, or 'Read more'.

Link to section titled: Modifiers

Modifiers

-outline: A classic outline version. Use it for a less prominent button.
-stealth: A button that looks like text. Use it for the least prominent buttons.
-active: Set the button to an active style. Use it for tag filter buttons that selected.
-small: Use a small button size.
-round: Make it round(ish)
-destructive: Indicate a destructive action. Same as -danger.
-offset: A button that has a special box shadow to look more 3D.
[disabled]: Disable the button using the standard disabled attribute
-aligned: Add negative margin to align the button like it had no padding.
-primary: Applies a theme using your primary brand color
-secondary: Applies a theme using your secondary brand color
-neutral: Applies a neutral theme
-muted: Applies a muted neutral theme with less contrast
-emphasis: Applies an emphasised theme, usually very visible
-info: Applies a theme using info colors. Use it to indicate info state
-warning: Applies a theme using warning colors. Used to indicate warning state
-success: Applies a theme using success colors. Used to indicate success state
-danger: Applies a theme using danger colors. Used to indicate danger state

Link to section titled: CSS Variables

CSS Variables

--button-background: Set the background. Default: --surface-hover.
--button-color: Set the foreground. Default: --text-hover.
--button-border-color: Set the border color. Default: --surface-hover.
--button-border-radius: Set the border radius. Default: --border-radius-medium.
--button-background-hover: Set the hover background. Default: --surface.
--button-background-hover-light: Set the hover color for stealth and outline variants. Defaults: current color mixed with transparent using --transparency-weaker
--button-color-hover: Set the hover foreground. Default: --text.
--button-border-color-hover: Set the hover border color. Default: --border.
--button-box-shadow: Set default box-shadow. Default: --shadow-near.
--button-hover-shadow: Set hover box-shadow. Default: --shadow-nearest.
--button-padding-inline: Set default button inline padding. Default: 1ch.
--control-height-base: Set the min button height. Default:

Link to section titled: Examples

Examples

All Button Variants

An overview over all button variants and their modifiers

Default buttons

Outline buttons

Stealth buttons

Special buttons

All Button Variants

- html

<div class="nc-stack">
    <p><strong>Default buttons</strong></p>
    <div class="nc-cluster -near">
        <button class="nc-button">Default</button>
        <button class="nc-button -primary">Primary</button>
        <button class="nc-button -secondary">Secondary</button>
        <button class="nc-button -muted">Muted</button>
        <button class="nc-button -info">Info</button>
        <button class="nc-button -warning">Warning</button>
        <button class="nc-button -danger">Danger</button>
        <button class="nc-button -success">Success</button>
    </div>
    <p><strong>Outline buttons</strong></p>
    <div class="nc-cluster -near">
        <button class="nc-button -outline">Outline</button>
        <button class="nc-button -outline -primary">Outline Primary</button>
        <button class="nc-button -outline -secondary">Outline Secondary</button>
        <button class="nc-button -outline -muted">Outline Muted</button>
        <button class="nc-button -outline -info">Outline Info</button>
        <button class="nc-button -outline -warning">Outline Warning</button>
        <button class="nc-button -outline -danger">Outline Danger</button>
        <button class="nc-button -outline -success">Outline Success</button>
    </div>
    <p><strong>Stealth buttons</strong></p>
    <div class="nc-cluster -near">
        <button class="nc-button -stealth">Stealth</button>
        <button class="nc-button -stealth -muted">Stealth Muted</button>
        <button class="nc-button -stealth -primary">Stealth Primary</button>
        <button class="nc-button -stealth -secondary">Stealth Secondary</button>
        <button class="nc-button -stealth -info">Stealth Info</button>
        <button class="nc-button -stealth -warning">Stealth Warning</button>
        <button class="nc-button -stealth -danger">Stealth Danger</button>
        <button class="nc-button -stealth -success">Stealth Success</button>
    </div>
    <p><strong>Special buttons</strong></p>
    <div class="nc-cluster -near">
        <button class="nc-button -destructive">Destructive button</button>
        <button class="nc-button -small">Small button</button>
        <button class="nc-button -round">Round button</button>
        <button class="nc-button -active">Active button</button>
        <button class="nc-button" disabled>Disabled button</button>
        <button class="nc-button -offset">Offset Button</button>
    </div>
</div>

Button with Icon

Buttons can also have inline icons indicating their action

Button with Icon

- html

<!-- COMPONENT-START: nc-button: icon -->
<div class="nc-cluster">
    <button class="nc-button">
        <svg
            class="nc-icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            aria-hidden="true"
            focusable="false"
            fill="currentColor"
        >
            <path d="M22 20H2V18H3V11.0314C3 6.04348 7.02944 2 12 2C16.9706 2 21 6.04348 21 11.0314V18H22V20ZM5 18H19V11.0314C19 7.14806 15.866 4 12 4C8.13401 4 5 7.14806 5 11.0314V18ZM9.5 21H14.5C14.5 22.3807 13.3807 23.5 12 23.5C10.6193 23.5 9.5 22.3807 9.5 21Z">
            </path>
        </svg>
        <span>Button with icon before</span>
    </button>
    <button class="nc-button">
        <span>Button with icon before</span>
        <svg
            class="nc-icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            aria-hidden="true"
            focusable="false"
            fill="currentColor"
        >
            <path d="M22 20H2V18H3V11.0314C3 6.04348 7.02944 2 12 2C16.9706 2 21 6.04348 21 11.0314V18H22V20ZM5 18H19V11.0314C19 7.14806 15.866 4 12 4C8.13401 4 5 7.14806 5 11.0314V18ZM9.5 21H14.5C14.5 22.3807 13.3807 23.5 12 23.5C10.6193 23.5 9.5 22.3807 9.5 21Z">
            </path>
        </svg>
    </button>
</div>
<!-- COMPONENT-END: nc-button -->