Skip to content

Conversation

ggdouglas
Copy link
Contributor

@ggdouglas ggdouglas commented Jul 29, 2025

Changes

Before / After


Current namespace prefix

Blueprint v6 uses the bp6- prefix for all CSS classes. For example, Button components have the class .bp6-button, Cards have .bp6-card, etc. This prefix changes with each major version of Blueprint (e.g., v5 used bp5-, v6 uses bp6-).

When writing custom styles that target Blueprint components, you should reference the namespace using the $ns Sass variable rather than hardcoding the prefix:

@use "@blueprintjs/core/lib/scss/variables.scss" as bp;

.my-class .#{bp.$ns}-button {
    // Custom styles for Blueprint buttons within .my-class
    background-color: red;
}

Checklist

  • Includes tests
  • Update documentation

@svc-palantir-github
Copy link

Add blurb about current bp6 namespace prefix to docs

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@svc-palantir-github
Copy link

Escape `@use` syntax in docs to avoid clash with docs `@tag`

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@ggdouglas ggdouglas force-pushed the gdouglas/update-classes-docs-ns branch from 69a006d to 8a1e8c9 Compare July 29, 2025 16:41
@svc-palantir-github
Copy link

Add `@use` to reserved tags

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants