` (i.e. with the `href` or `to` prop set).
```html
diff --git a/src/components/button/button.js b/src/components/button/button.js
index 5050ebeb51b..d1a65890d42 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -41,6 +41,10 @@ const btnProps = {
type: Boolean,
default: false
},
+ squared: {
+ type: Boolean,
+ default: false
+ },
pressed: {
// tri-state prop: true, false or null
// => on, off, not a toggle
@@ -96,6 +100,7 @@ const computeClass = props => [
[`btn-${props.size}`]: Boolean(props.size),
'btn-block': props.block,
'rounded-pill': props.pill,
+ 'rounded-0': props.squared && !props.pill,
disabled: props.disabled,
active: props.pressed
}
diff --git a/src/components/button/button.spec.js b/src/components/button/button.spec.js
index 276775282df..43f7db13d79 100644
--- a/src/components/button/button.spec.js
+++ b/src/components/button/button.spec.js
@@ -90,7 +90,7 @@ describe('button', () => {
expect(wrapper.classes().length).toBe(3)
})
- it('applies pill class', async () => {
+ it('applies rounded-pill class when pill prop set', async () => {
const wrapper = mount(BButton, {
propsData: {
pill: true
@@ -106,6 +106,22 @@ describe('button', () => {
expect(wrapper.classes().length).toBe(3)
})
+ it('applies rounded-0 class when squared prop set', async () => {
+ const wrapper = mount(BButton, {
+ propsData: {
+ squared: true
+ }
+ })
+
+ expect(wrapper.is('button')).toBe(true)
+ expect(wrapper.attributes('type')).toBeDefined()
+ expect(wrapper.attributes('type')).toBe('button')
+ expect(wrapper.classes()).toContain('btn')
+ expect(wrapper.classes()).toContain('btn-secondary')
+ expect(wrapper.classes()).toContain('rounded-0')
+ expect(wrapper.classes().length).toBe(3)
+ })
+
it('renders custom root element', async () => {
const wrapper = mount(BButton, {
propsData: {