Icon Button

Component

Icon Button

- html

<!-- COMPONENT-START: nc-button: icon -->
<button class="nc-button -icon">
    <span class="text-assistive">Screen Reader Label</span>

    <svg
        class="nc-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        aria-hidden="true"
        focusable="false"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
    >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M20 3v10a8 8 0 1 1 -16 0v-10l3.432 3.432a7.963 7.963 0 0 1 4.568 -1.432c1.769 0 3.403 .574 4.728 1.546l3.272 -3.546z" />
        <path d="M2 16h5l-4 4" />
        <path d="M22 16h-5l4 4" />
        <path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
        <path d="M9 11v.01" />
        <path d="M15 11v.01" />
    </svg>
</button>
<!-- COMPONENT-END: nc-button -->

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

Link to section titled: Usage notes

Usage notes

Make sure to set the icon to aria-hidden, so the content isn't read to screen reader users.
Make sure to have a fitting and descriptive aria-label for screen reader users.

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: