button.ghost

[odama626]

a ghost style button that is like outline -- just without the outline

messing around with chatgpt...

/* Base ghost button style */
:is(button, [type="button"], [type="submit"], [role="button"]).ghost {
  --pico-background-color: transparent;
  --pico-border-color: transparent;
  --pico-color: var(--pico-primary);
}

/* Hover, focus, active, and aria-current states */
:is(button, [type="button"], [type="submit"], [role="button"]).ghost:is(
    :hover,
    :focus,
    :active,
    [aria-current]:not([aria-current="false"])
  ) {
  --pico-background-color: transparent;
  --pico-color: var(--pico-primary-hover);
  --pico-border-color: transparent;
}

/* Secondary ghost button */
:is(button, [type="button"], [type="submit"], [role="button"]).ghost.secondary {
  --pico-color: var(--pico-secondary);
}

:is(button, [type="button"], [type="submit"], [role="button"]).ghost.secondary:is(
    :hover,
    :focus,
    :active,
    [aria-current]:not([aria-current="false"])
  ) {
  --pico-color: var(--pico-secondary-hover);
}

/* Contrast ghost button */
:is(button, [type="button"], [type="submit"], [role="button"]).ghost.contrast {
  --pico-color: var(--pico-contrast);
}

:is(button, [type="button"], [type="submit"], [role="button"]).ghost.contrast:is(
    :hover,
    :focus,
    :active,
    [aria-current]:not([aria-current="false"])
  ) {
  --pico-color: var(--pico-contrast-hover);
}

[nicholas-johnson]

Approving of this. It's useful for things like icon buttons, and cases where a button has to look like a link for any reason.

[Yohn]

Ghost buttons have been added as of version 2.2.4

[justEstif]

What are your thoughts on the default padding and spacing for ghost buttons being 0?

[Yohn]

I was thinking about that the other day actually. If we were to remove the spacing and padding I think it would need a different class name, like .ghost-link to make it match links on a page (will also need to add text-decoration) because as @nicholas-johnson mentioned, he likes to use this ghost type of button for icon button. I could see other use cases where we would still like to keep the padding and the margin on the bottom.

Another solution would be to make another class to remove the padding and margins. I started on a basic utilities css sheet to add or remove padding and margin but this would add more classes to your style sheet.