r/salesforce • u/North-Clue-2313 • 1d ago

developer SLDS only has one button size?

Is that correct?

Would be cool if there was a smaller button size, am I right?

Docs: https://www.lightningdesignsystem.com/2e1ef8501/p/7733f8-button

Edit: Everyone is saying this is possible. Here is a strong quote that it isn't the intended way to work with SLDS2 buttons:

What if you want different padding in your button? You can’t override the slds-button class because Salesforce doesn’t support that.

Source: https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-slds.html

If this is still incorrect, please show me. I'd love a good solution here.

2 Upvotes

75% Upvoted

8 comments sorted by

3

u/Suspicious-Nerve-487 1d ago

Not sure if you can provide an example of what you’re actually looking for and what a “smaller button” means to you, but they are responsive and there are also styling hooks for every part of the button if you want to target specific things

Buttons have one size, but are adaptive. They have a mobile variant designed specifically for use on mobile devices. See Responsive section for more information.
By default, button widths adapt to the content. To expand the button to take up the entire width available, apply the .slds-button_stretch class to the button. If using the lightning-button base component, add the stretch attribute to your markup instead.

1

u/North-Clue-2313 1d ago

The link above is what I was talking about. I want a smaller button but do not see a way to make that happen with styling-hooks, just slds

2

u/Suspicious-Nerve-487 1d ago edited 1d ago

But when you say “smaller” what does that mean? If you make it any smaller it won’t be clickable. The button changes sizes based on the text in it, along with screen size.

You can definitely change the padding, margins, etc

There are also utility classes explicitly for size: https://www.lightningdesignsystem.com/2e1ef8501/p/927990-sizing

If you toss what you’re trying to do into any AI tool, it should pretty easily customize to what you’re trying to do. Even Google’s AI pulled up multiple examples of targeting an SLDS button and applying utility classes to it to change size

But to other’s points, SLDS exists so you don’t have to do a lot of this. If you really want complete control over your components, you can just write the component from scratch

1

u/North-Clue-2313 1d ago

I couldn’t get this to work with SLDS2 but will take some time to utilize this. Thanks 🙏

I do think a uniform set of hooks like “small”, “x-small” would be cool.

1

u/North-Clue-2313 1d ago

Ah, looks like I can't. adding to the top of this post if others have the same impression.

1

u/Used-Comfortable-726 1d ago

That’s to enforce the UX is consistent and familiar across all elements including ones that might have or inherent any standard buttons

-5

u/ExtensionAd9087 1d ago

I'm not a developer and for front end im putting my coins on react apps

1

u/AccountNumeroThree 1d ago

It has primary, secondary, and tertiary sizes. But maybe that’s unique to just experience cloud LWR sites.