Button

Button triggers an event or action. They let users know what will happen next.

Examples

Basic usage

The default Strawberry theme exports button styles to get you started quickly. Import the button module to include the styles.

<script>
	import '@kwangure/strawberry/css/button.css';

	let count = 0;
</script>

<button on:click={() => count++}>
	Increment Counter: {count}
</button>

Primary button

Add the .br-button-primary class to a button to give it an accent color that puts emphasis on it.

<script>
	import '@kwangure/strawberry/css/button.css';
</script>

<button class='br-button-primary'>
	I'm a primary button
</button>
<button>
	I'm a plain old button
</button>

Alternative buttons

Generally, only the <button/> element should be used for actions. In some cases though, what seems like an action to the user is actually a navigation in the app or a general click. Use the role='button' attribute on non-button elements to give them a button appearance.

<script>
	import '@kwangure/strawberry/css/button.css';
</script>

<a href='/components/button' role='button'>
	I'm an anchor tag
</a>
<div role='button'>
	I'm a div tag
</div>

I'm an anchor tag

I'm a div tag

Ignoring styles

Add the .br-ignore class to exclude a button from Strawberry styling.

<script>
	import '@kwangure/strawberry/css/button.css';
</script>

<button>
	I have Strawberry styles
</button>
<button class='br-ignore'>
	I have UserAgent styles
</button>