diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index b1282280d7..47b8d6140d 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -781,6 +781,9 @@ declare global {
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
*/
'fill': 'clear' | 'outline' | 'solid' | 'default';
+ /**
+ * If true, the transition direction will be backwards upon navigation. Defaults to `false`.
+ */
'goBack': boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
@@ -844,6 +847,9 @@ declare global {
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
*/
'fill'?: 'clear' | 'outline' | 'solid' | 'default';
+ /**
+ * If true, the transition direction will be backwards upon navigation. Defaults to `false`.
+ */
'goBack'?: boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 686154b5e2..ec20f0460c 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -16,59 +16,6 @@ export class Button {
@State() keyFocus: boolean;
- /**
- * The type of the button.
- * Possible values are: `"submit"`, `"reset"` and `"button"`.
- * Default value is: `"button"`
- */
- @Prop() type = 'button';
-
- /**
- * Contains a URL or a URL fragment that the hyperlink points to.
- * If this property is set, an anchor tag will be rendered.
- */
- @Prop() href: string;
-
- /**
- * The type of button.
- * Possible values are: `"button"`, `"bar-button"`.
- */
- @Prop({mutable: true}) buttonType = 'button';
-
- /**
- * The button size.
- * Possible values are: `"small"`, `"default"`, `"large"`.
- */
- @Prop() size: 'small' | 'default' | 'large';
-
- /**
- * If true, the user cannot interact with the button. Defaults to `false`.
- */
- @Prop() disabled = false;
-
- /**
- * Set to `"clear"` for a transparent button, to `"outline"` for a transparent
- * button with a border, or to `"solid"`. The default style is `"solid"` except inside of
- * a toolbar, where the default is `"clear"`.
- */
- @Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default';
-
- /**
- * If true, activates a button with rounded corners.
- */
- @Prop() round = false;
-
- /**
- * Set to `"block"` for a full-width button or to `"full"` for a full-width button
- * without left and right borders.
- */
- @Prop() expand: 'full' | 'block';
-
- /**
- * If true, activates a button with a heavier font weight.
- */
- @Prop() strong = false;
-
/**
* The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -83,7 +30,64 @@ export class Button {
*/
@Prop() mode: 'ios' | 'md';
+ /**
+ * The type of button.
+ * Possible values are: `"button"`, `"bar-button"`.
+ */
+ @Prop({ mutable: true }) buttonType = 'button';
+
+ /**
+ * If true, the user cannot interact with the button. Defaults to `false`.
+ */
+ @Prop() disabled = false;
+
+ /**
+ * Set to `"block"` for a full-width button or to `"full"` for a full-width button
+ * without left and right borders.
+ */
+ @Prop() expand: 'full' | 'block';
+
+ /**
+ * Set to `"clear"` for a transparent button, to `"outline"` for a transparent
+ * button with a border, or to `"solid"`. The default style is `"solid"` except inside of
+ * a toolbar, where the default is `"clear"`.
+ */
+ @Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default';
+
+ /**
+ * If true, the transition direction will be backwards upon navigation. Defaults to `false`.
+ */
@Prop() goBack = false;
+
+ /**
+ * Contains a URL or a URL fragment that the hyperlink points to.
+ * If this property is set, an anchor tag will be rendered.
+ */
+ @Prop() href: string;
+
+ /**
+ * If true, activates a button with rounded corners.
+ */
+ @Prop() round = false;
+
+ /**
+ * The button size.
+ * Possible values are: `"small"`, `"default"`, `"large"`.
+ */
+ @Prop() size: 'small' | 'default' | 'large';
+
+ /**
+ * If true, activates a button with a heavier font weight.
+ */
+ @Prop() strong = false;
+
+ /**
+ * The type of the button.
+ * Possible values are: `"submit"`, `"reset"` and `"button"`.
+ * Default value is: `"button"`
+ */
+ @Prop() type = 'button';
+
/**
* Emitted when the button has focus.
*/
@@ -114,17 +118,7 @@ export class Button {
}
protected render() {
-
- const {
- buttonType,
- color,
- expand,
- fill,
- mode,
- round,
- size,
- strong
- } = this;
+ const { buttonType, color, expand, fill, mode, round, size, strong } = this;
const TagType = this.href ? 'a' : 'button';
const buttonClasses = {
diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md
index 887415a990..6d64c5e35a 100644
--- a/core/src/components/button/readme.md
+++ b/core/src/components/button/readme.md
@@ -32,47 +32,6 @@ This attribute specifies the size of the button. Setting this attribute will cha
| `large` | Button with more height and padding. |
-```html
-
-Default
-Secondary
-Warning
-Danger
-Light
-Dark
-
-
-Full Button
-Block Button
-Round Button
-
-
-Outline + Full
-Outline + Block
-Outline + Round
-
-
-
-
- Left Icon
-
-
-
- Right Icon
-
-
-
-
-
-
-
-
-Large
-Default
-Small
-```
-
-
@@ -123,6 +82,8 @@ a toolbar, where the default is `"clear"`.
boolean
+If true, the transition direction will be backwards upon navigation. Defaults to `false`.
+
#### href
@@ -219,6 +180,8 @@ a toolbar, where the default is `"clear"`.
boolean
+If true, the transition direction will be backwards upon navigation. Defaults to `false`.
+
#### href
diff --git a/core/src/components/button/usage/angular.md b/core/src/components/button/usage/angular.md
new file mode 100644
index 0000000000..f219dd2eda
--- /dev/null
+++ b/core/src/components/button/usage/angular.md
@@ -0,0 +1,54 @@
+
+```html
+
+Default
+
+
+Anchor
+
+
+Backwards Anchor
+
+
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+
+
+Full Button
+Block Button
+
+
+Round Button
+
+
+Outline + Full
+Outline + Block
+Outline + Round
+
+
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+
+
+
+
+Large
+Default
+Small
+```
\ No newline at end of file
diff --git a/core/src/components/button/usage/javascript.md b/core/src/components/button/usage/javascript.md
new file mode 100644
index 0000000000..622177a569
--- /dev/null
+++ b/core/src/components/button/usage/javascript.md
@@ -0,0 +1,54 @@
+
+```html
+
+Default
+
+
+Anchor
+
+
+Backwards Anchor
+
+
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+
+
+Full Button
+Block Button
+
+
+Round Button
+
+
+Outline + Full
+Outline + Block
+Outline + Round
+
+
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+
+
+
+
+Large
+Default
+Small
+```
\ No newline at end of file